jquery - jQuery手风琴：单击活动标签时删除活动类

Question

我有一个简单的手风琴，可以让所有人崩溃。因此，单击活动面板会折叠它。我已经before为after箭头分配了伪类，但是当单击它以折叠它时，我无法弄清楚如何从活动标签中删除活动类。如果单击不同的标签，则活动类将被删除，但如果单击活动标签以折叠它，则不会。

这是一个小提琴。

这是脚本：

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    $(this).addClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});

我尝试了几种不同的配置（例如，反转if(false)语句和删除active类），但我尝试过的一切都是在黑暗中拍摄的。任何帮助表示赞赏。

Answer 1

尝试

    $(".accordion > dt").click(function(){
    $('.active').removeClass('active');

    if(false == $(this).next().is(':visible')) {
        $(this).addClass('active');
        $('.accordion > dd').slideUp(600);
    }
    $(this).next().slideToggle(600);
});

Answer 2

使用toggleClass()和siblings()

尝试这个

    $(".accordion > dt").click(function(){
    //$('.active').removeClass('active');
         $(this).toggleClass('active').siblings('dt').removeClass();

          if(false == $(this).next().is(':visible')) {
    $('.accordion > dd').slideUp(600);
          }
       $(this).next().slideToggle(600);
});

Answer 3

dt这是因为每次单击时您的活动类都会添加到元素中。如果不存在活动类，则仅添加活动类，这意味着如果没有dd元素可见。所以你需要改为

$(".accordion > dt").click(function(){
    $('.active').removeClass('active');
    if(false == $(this).next().is(':visible')) {
        $('.accordion > dd').slideUp(600);
        $(this).addClass('active');
    }
    $(this).next().slideToggle(600);
});

检查更新的演示小提琴。