Добавить активное состояние в простой 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 на элементе clicked.

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

});