Question

我已经得到了这个简单的手风琴jQuery脚本，它几乎就是我需要的东西，但是我最后还在挣扎。动画位工作正常 - 即如果相应的内容块关闭，它会滑开，反之亦然。

这里是jQuery代码：

$('.accordion-heading').click(function(){
    $(this).next().slideToggle(300);
    $('.accordion-content').not($(this).next()).slideUp(300);
    $('.accordion-heading.active').removeClass('active');
    $(this).addClass('active');
});

我希望有一个活跃的＆＃39;标题上的类，但如果单击两次相同的元素，我需要删除它。目前，如果点击非活动标题，一切正常。但是，如果再次单击已经处于活动状态的标题，则内容块会正确折叠，但标题会保留其活动状态＆＃39;类。

Answer 1

您需要做的就是从当前元素的元素中删除.active类（您可以使用当前在另一个元素上的相同$.not()方法），然后{ {1}}点击元素上的$.toggleClass()类。

＆＃13;

.active

＆＃13;

$('.accordion-heading').click(function(){
    $(this).next().slideToggle(300);
    $('.accordion-content').not($(this).next()).slideUp(300);
    $(this).toggleClass('active');
    $('.accordion-heading').not($(this)).removeClass('active');
});

＆＃13;

.accordion-content {
  display: none;
}
.active {
  color: red;
}

＆＃13;

Answer 2

我建议使用.toggleClass()而不是添加类和删除类，如果元素具有类，它将删除它，如果它没有，它将添加它。如果你想手动打开其中一个手风琴给它活动课，让你的JS完成其余的工作。

Answer 3

你可以使用＆＃39; toggleClass（）＆＃39;但我发现通过检查点击的项目是否激活了类来更好地更具体。这样，您可以根据状态分支出来并执行其他功能：

$('.accordion-heading').click(function(){

    var theHeading = $(this);
    var theContent = theHeading.next();
    var slideTimer = 300;

    if(theHeading.hasClass('active')) {
        $('.accordion-heading.active').removeClass('active').next().slideUp(slideTimer);
        theContent.slideDown(slideTimer);
        $(this).addClass('active');
    } else {
        theContent.slideUp(slideTimer);
        $(this).removeClass('active');
    }

});

将活动状态添加到简单的jQuery手风琴中

3 个答案: