2

我有一个手风琴，它在单击另一个元素时关闭一个元素，并且只需单击一次即可打开和两次关闭（手风琴按钮）。除了添加和删除两个类之外，一切都运行良好，这两个类控制它是否具有打开或关闭箭头 'accordionButtonActive' 和 'accordionButtonNotactive' 因为这是在单击时控制的，如果它被关闭，它不会删除和添加新类单击另一个而不是再次单击以关闭，这可以完美运行。

我是 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>
4

1 回答 1

3

当单击任何标题时，您可以删除活动类并为任何兄弟添加非活动类：

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

例子

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

您也可以使用toggleClass, 以便只需要为当前元素处理一个类一次，而不是addClass在一个条件下使用，然后removeClass在另一个条件下使用。

例子

于 2012-04-30T12:38:01.287 回答