Question

用jQuery设置一个简单的Accordion。基本结构是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;
   });

当试图关闭同一个手风琴时会出现问题;它只在关闭后立即重新打开。任何帮助是极大的赞赏。

Answer 1

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

只要点击了手风琴标题，您的代码就会调用slideDown()。

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

当用户单击一个打开的折叠标题只是为了隐藏其内容时，此行为会中断。下面的代码首先检查点击的标题是否代表开放式手风琴。如果是，那么您不想在其上拨打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有一个错误，因为它加载了一个＆＃39; open＆＃39;类的Price Range标题。

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

这是一个错误，因为在页面加载时没有手风琴打开。标签应该只是：

<h3>Price Range</h3>

希望这有帮助

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

1 个答案: