javascript - 向简单的 jQuery Accordion 添加事件状态

Question

我已经有了这个简单的 Accordion jQuery 脚本，它几乎可以满足我的需要，但我正在努力解决最后一件事。动画位工作正常 - 即，如果相应的内容 block 关闭，它就会滑开，反之亦然。

这是 jQuery 代码:

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

我想在标题上有一个“事件”类，但如果同一元素被单击两次，我需要将其删除。目前，如果单击非事件标题，则一切正常。但是，如果再次单击已经处于事件状态的标题，内容 block 会正确折叠，但标题仍保留其“事件”类别。

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>