单击翻转两个图像

Question

我正在编写一个小型的两列手风琴列表，其中元素的右侧有一个箭头图像。当我单击一个列表项时，箭头会向上翻转，当我再次单击它时，它会向下翻转（切换），但是如果我单击它并且箭头向上，然后单击另一个项目，则前一个箭头保持不变指着。如何让它们同时切换？

这里是 Fiddle.

这是一些代码：

$('#accordCont ul > li').click(function() {
    $(this).find('img:last-child').toggleClass('flipped');
    $(this).find('img:last-child').next().toggleClass('flipped');
});

提前致谢！

Answer 1

您好，请在此处找到解决方案：

这允许多个 ul's:

$(document).ready(function() {
        $('#accordCont ul > li div').click(function(e) {
            e.stopPropagation();
        }).hide();

        $('#accordCont ul > li').click(function() {
            var selfClick = $(this).find('div:first').is(':visible');
            if (!selfClick) {
                $(this).parent().find('> li div:visible').slideToggle();
            }

            $(this)
                .find('div:first')
                .stop(true, true)
                .slideToggle();
        });

        $('#accordCont ul > li').click(function() {
            var img = $(this).find('img:last-child')
            img.toggleClass('flipped');
            img.next().toggleClass('flipped');
            $("img.flipArrow").not(img).removeClass("flipped");
        });
    });

Fiddle

单击翻转两个图像

Flip two images on click

html

jquery

jquery-plugins