切换子元素的类(并删除兄弟姐妹)

Question

我有下面的代码，通过切换.active类来创建手风琴效果。单击.section-header后，我将在标题和.section-content上切换一个类。效果很好。

但是，如前所述，这是为了创建一个手风琴效应，它是由多个.accordion-section <div>标记组成的。我需要调整jquery，以便从除当前活动的.accordion-section之外的每个.accordion-section中删除所有的jquery类。目前，单击.section-header在所有.section-content <div>标记上切换一个.active类。

谢谢。

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