使多个部分保持打开状态的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    }});