Jquery 关闭手风琴将重新打开相同的手风琴元素

只需使用jQuery设置一个简单的手风琴。基本结构是H3作为收割台，下面的div作为容器。我使用了以下代码，在打开和关闭元素时，一切都运行良好：

var panels = $('#edit-options > .option-category > div.options').hide();

   $('#edit-options > .option-category > h3').click(function() {
      panels.slideUp();
      $(this).next().slideDown();
      $(this).toggleClass('open');
      return false;
   });

问题发生在试图关闭同一个手风琴时；它仅在关闭后立即重新打开。非常感谢您的帮助

显示了答案。请注意几件事

每当单击手风琴头时，您的代码都会调用

slideDown（）

$('#edit-options > .option-category > h3').click(function () {
    panels.slideUp();
    $(this).next().slideDown();
    . . . .
});

当用户单击打开的accordion标题以隐藏其内容时，此行为就会中断。下面的代码首先检查单击的标题是否代表打开的手风琴。如果是，那么您就不想对其调用

slideDown（）

$('#edit-options > .option-category > h3').click(function () {
    panels.slideUp();
    if($(this).hasClass('open')) {  
        $(this).removeClass('open') // we just closed this accordion and don't need to open a new accordion tab
    } else { //we need to open a new accordion tab and mark it as the tab that is open
        $('#edit-options > .option-category > h3').removeClass('open');
        $(this).next().slideDown();
        $(this).toggleClass('open');
    };
    return false;
});

此外，您的html还有一个bug，它在加载Price-Range标题时使用了一个“open”类

 <h3 class="open">Price Range</h3>

价格范围

这是一个错误，因为在pageload上没有打开手风琴。标签应该是：

<h3>Price Range</h3>

价格范围

---

希望这能有所帮助

如果您想在JSFIDLE中重新创建问题并在问题中添加链接，我相信我们可以帮助您。向各位道歉。遗憾的是，我在这里不够。请原谅HTML中的错误标记。这是来自一个Drupal构建。（另外，底部的两个元素将不起作用，因为我将在模板文件中清理这些元素，以便它们位于正确的区域内。目前，这些元素可以忽略）。回答得好，恰克。非常感谢修改后的提琴和澄清。很高兴我能帮上忙