在子元素上切換類（並刪除同級）

Question

我有以下代碼，用於通過切換.active類來創建手風琴效果。 單擊.section-header ，我在header和.section-content上切換一個類。 這運作良好。

但是，如上所述，這是為了創建手風琴效果，該效果由多個.accordion .accordion-section <div>標簽修飾而成。 我需要調整jquery，以便從每個.active .accordion-section刪除所有.active類，而不是當前處於活動狀態的類。 目前，單擊.section-header會在所有.section-content <div>標記上切換一個.active類。

謝謝。

的HTML

<div class="accordion-section">
    <a class="section-header">
        <h3>Title</h3>
    </a>
    <div class="section-content">
        <div>Content</div>
    </div>
</div>

JS

$('.accordion-section .section-header').click(function(){
    $(this).toggleClass('active');
    $(this).siblings().toggleClass('active');
});

Answer 1

$('.accordion-section .section-header').click(function(){
    // Check to see the initial state of the element
    var isActive = $(this).hasClass('active');

    // first remove the active class from all other section headers within this accordion section
    $('.accordion-section')
        .find('.section-header, .section-content')
            .removeClass('active');

    // Get the header and content for this section
    var sectionHeaderAndContent = $(this)
        .closest('.accordion-section')
            .find('.section-header, .section-content');

    // Toggle Active State: Set final active state based on state when clicked
    (isActive) ? sectionHeaderAndContent.removeClass('active'): sectionHeaderAndContent.addClass('active');
});