向簡單的jQuery手風琴添加活動狀態

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');
});

我想在標題上添加一個“活動”類，但是如果兩次單擊同一元素，則需要將其刪除。 目前，如果單擊非活動標題，則一切正常。 但是，如果再次單擊已經處於活動狀態的標題，則內容塊會正確折疊，但標題將保留其“活動”類。

Answer 1

您需要做的就是從不是當前元素的元素中刪除.active類（可以使用與當前在另一個元素上相同的$.not()方法），然后從$.toggleClass()中.active類在單擊的元素上。

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

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <div class="accordion-heading">heading</div> <div class="accordion-content">body</div> <div class="accordion-heading">heading</div> <div class="accordion-content">body</div> <div class="accordion-heading">heading</div> <div class="accordion-content">body</div> </div> 

Answer 2

建議不要使用添加.toggleClass()方式添加類並刪除該類，如果元素具有該類，它將刪除它；如果沒有，將添加它。 如果您想手動打開其中的手風琴之一，請給它一個活動類，然后讓您的JS完成其余的工作。

Answer 3

您可以使用“ toggleClass（）”，但我可以通過檢查所單擊的項目是否具有激活的類來使其更具體。 這樣，您可以根據狀態分支並執行其他功能：

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

});