jQuery UI 手风琴：一次打开多个面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15702444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI accordion: open multiple panels at once
提问by Tarun
I'm trying to create an accordion able to expand multiple panels at once. I have tried to find it in the jQuery UI API, but I haven't yet found the proper way.
我正在尝试创建一个能够同时展开多个面板的手风琴。我试图在 jQuery UI API 中找到它，但我还没有找到正确的方法。
Please let me know if there is a way of doing this using jQuery UI accordion.
请让我知道是否有办法使用 jQuery UI 手风琴来做到这一点。
回答by Boaz - Reinstate Monica
As others have noted, the Accordionwidget does not have an API option to do this directly. However, if you mustuse the widget, it is possible to achieve this by using the beforeActivateevent handler option to subvert and emulate the default behavior of the widget.
正如其他人所指出的，Accordion小部件没有直接执行此操作的 API 选项。但是，如果您必须使用小部件，则可以通过使用beforeActivate事件处理程序选项来颠覆和模拟小部件的默认行为来实现这一点。
For example:
例如：
$('#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
}
});
See a jsFiddle demo
看一个jsFiddle 演示
回答by anssi
You could write multiple accordions that are stacked and each accordion have only one panel. This way the panels could be individually toggled.
您可以编写多个堆叠的手风琴，每个手风琴只有一个面板。这样面板可以单独切换。
回答by isherwood
An accordion is, by definition, a set of expanding elements that toggle in a certain way. You don't want that. You just want a set of expanding elements. It's extremely easy to build that with jQuery. It often needs nothing more than this:
根据定义，手风琴是一组以某种方式切换的扩展元素。你不想那样。您只需要一组扩展元素。使用 jQuery 构建它非常容易。它通常只需要这样：
$('.my-heading-class').on('click', function() {
$(this).next('.my-content-class').slideToggle();
});
<div class="my-heading-class">My Heading</div>
<div class="my-content-class">My Content</div>
