Question

我有以下逻辑来扩展/崩溃Q＆amp;一节。我正在尝试将类添加到“A”以指示折叠/展开状态。我想我的问题太复杂了，而且不起作用......

$(".A").hide();
$(".Q").click(function() {
    $(".A:visible").slideUp("slow");
    $(this).next(".A:hidden").slideDown("slow");

   // part below does not work !!!
    $(this).each(function(){
        if ($(this).is(":visible")) {
            $(this).find("span").removeClass("collapsed").addClass("expanded");
        } else {
            $(this).find("span").removeClass("expanded").addClass("collapsed");
        }
    });
});

<div class="Q"><span class="collapsed"></span>aaaa</div>
<div class="A">bbbb</div>

<div class="Q"><span class="collapsed"></span>cccc</div>
<div class="A">dddd</div>

Answer 1

$(".A").hide();
$(".Q").click(function() {
    var that = this;
    $(".A:visible").slideUp("slow");
    $(".Q span.expanded")
        .removeClass('expanded')
        .addClass('collapsed');
    $(this)
        .next(".A:hidden")
        .slideDown("slow", function(){
            $('span.collapsed', that)
                .removeClass('collapsed')
                .addClass('expanded');
        });
});

Demo

使用/ jQuery在部分折叠/展开上添加/删除类

1 个答案: