Question

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

这是fiddle。

这是剧本：

$(".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);
});

检查Updated Demo Fiddle。

jQuery accordion：单击活动标签时删除活动类

3 个答案: