Question

我有一个手风琴，当单击另一个元素时关闭一个元素，以及只需单击一次打开，两次关闭（accordionButton）。除了添加和删除两个类之外，所有这些都很有效，这两个类控制它是否具有打开或关闭箭头'accordionButtonActive'＆amp; '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

当点击任何标题时，你可以删除active-class并为任何兄弟添加inactive-class：

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

Example

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

你也可以使用toggleClass，只需要为当前元素处理一个类，而不是在一个条件中使用addClass，而removeClass在另一个。

Example

手风琴的JQuery addClass removeClass

1 个答案: