JQuery addClass removeClass Accordion

Question

我有一个 Accordion ，当单击另一个元素时，它会关闭一个元素，并且只需单击一次即可打开，两次即可关闭(accordionButton)。除了添加和删除两个类之外，所有内容都运行良好，这两个类控制它是否有打开或关闭箭头“accordionButtonActive”和“accordionButtonNotactive”，因为这是通过单击进行控制的，所以如果它被关闭，则不会删除和添加新类单击另一个而不是再次单击即可关闭，效果非常好。

我是 Jquery 的新手，很高兴我能尽我所能地完成这项工作，现在我对使最后一部分发挥应有的功能感到有点困惑。

JQuery:

    $("div.accordionButton").addClass("accordionButtonNotactive");

//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {

    if($(this).next().is(':visible')) {
        $('div.accordionContent').slideUp('normal');
          $(this).addClass("accordionButtonNotactive").removeClass("accordionButtonActive");

    } else {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
        $(this).removeClass("accordionButtonNotactive").addClass("accordionButtonActive"); 

    }
});

    //OPEN FIRST    
$("#open").trigger('click');


    });

简单的 HTML:

  <div class="accordionButton" id="open">Title</div>
  <div class="accordionContent">
    <p>Content</p>
  </div>

Answer 1

当单击任何标题时，您可以删除事件类并为任何同级添加非事件类:

$(this).siblings('.accordionButtonActive')
    .removeClass('accordionButtonActive')
    .addClass('accordionButtonNotactive');

Example

此外，您可能会发现为 .accordionButton 添加一种样式并为 .accordionButton.active 覆盖该样式会更容易，这样您只需处理一个类.

您还可以使用 toggleClass，以便只需为当前元素处理该类​​一次，而不是在一种情况下使用 addClass，并且另一个中的removeClass。

Example