jQuery折叠面板：单击活动标签时删除活动类

wnavrhmk 于 2022-12-03 发布在 jQuery

关注(0)|答案(3)|浏览(149)

我有一个简单的折叠面板，它允许所有的折叠。所以点击活动面板折叠它。我有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类），但是我所尝试的一切都是在黑暗中进行的。

jquery

来源：https://stackoverflow.com/questions/19628175/jquery-accordion-remove-active-class-when-clicking-active-label

3条答案

按热度按时间

uujelgoq1#

尝试

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

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

赞(0）回复(0）举报 2022-12-03

gj3fmq9x2#

使用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);
});

赞(0）回复(0）举报 2022-12-03

g6ll5ycj3#

这是因为每次单击时，活动类都会被添加到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。

赞(0）回复(0）举报 2022-12-03

我来回答

jQuery折叠面板：单击活动标签时删除活动类

3条答案

相关问题

热门标签

最新问答