使多个部分保持打开状态的jQuery UI手风琴？

Question

我可能是个白痴，但是如何在jQuery UI的手风琴中打开多个部分呢？演示一次只能打开一个……我正在寻找一个可折叠的菜单类型系统。

Answer 1

这原本是讨论中的手风琴jQuery用户界面文档：

注意：如果要一次打开多个部分，请不要使用手风琴

手风琴不允许同时打开一个以上的内容面板，为此需要付出很多努力。如果您正在寻找一种可以打开多个内容面板的小部件，请不要使用它。通常，它可以用几行jQuery代替，如下所示：

jQuery(document).ready(function(){

  $('.accordion .head').click(function() {

      $(this).next().toggle();

      return false;

  }).next().hide();

});

或动画：

jQuery(document).ready(function(){

  $('.accordion .head').click(function() {

      $(this).next().toggle('slow');

      return false;

  }).next().hide();

});

“我可能是个白痴”-如果您不阅读文档，那么您不是白痴，但是如果遇到问题，通常可以加快找到解决方案的速度。

Answer 2

在类似的线程中发布此内容，但认为在这里也可能与此相关。

使用jQuery-UI手风琴的单个实例来实现

正如其他人指出的那样，Accordion小部件没有API选项可以直接执行此操作。但是，如果由于某种原因必须使用小部件（例如，您正在维护现有系统），则可以通过使用beforeActivate事件处理程序选项来颠覆和模拟小部件的默认行为来实现。

例如：

$('#accordion').accordion({

    collapsible:true,

    beforeActivate: function(event, ui) {

         // The accordion believes a panel is being opened

        if (ui.newHeader[0]) {

            var currHeader  = ui.newHeader;

            var currContent = currHeader.next('.ui-accordion-content');

         // The accordion believes a panel is being closed

        } else {

            var currHeader  = ui.oldHeader;

            var currContent = currHeader.next('.ui-accordion-content');

        }

         // Since we've changed the default behavior, this detects the actual status

        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header

        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon

        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content

        currContent.toggleClass('accordion-content-active',!isPanelSelected)    

        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action

    }

});