jQuery UI手风琴：一次打开多个面板

我正在努力创造一种能够同时扩展多个面板的手风琴。 我试图在jQuery UI API中找到它，但我还没有找到正确的方法。

如果有使用jQuery UI手风琴的方法，请告诉我。

Answer 1

正如其他人所指出的那样， Accordion小部件没有直接执行此操作的API选项。 但是，如果必须使用窗口小部件，则可以通过使用beforeActivate事件处理程序选项来破坏和模拟窗口小部件的默认行为来实现此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; // Cancel the default action } }); 

查看jsFiddle演示

Answer 2

根据定义，手风琴是一组以某种方式切换的扩展元素。 你不希望这样。 你只需要一组扩展元素。 使用jQuery构建它非常容易。 它通常只需要：

 $('.my-heading-class').on('click', function() { $(this).next('.my-content-class').slideToggle(); }); 
My Heading
 
My Content 

Answer 3

您可以编写多个叠加的手风琴，每个手风琴只有一个面板。 这样，面板可以单独切换。