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

点击即可翻转两张图片

1 个答案: