Javascript 保持多个部分打开的 jQuery UI 手风琴？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3479447/
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 that keeps multiple sections open?
提问by Walker
I may be an idiot, but how do you keep multiple sections in jQuery UI's accordion open? The demos all have only one open at a time... I'm looking for a collapseable menu type system.
我可能是个白痴，但是如何在 jQuery UI 的手风琴中打开多个部分？演示一次只打开一个...我正在寻找一个可折叠的菜单类型系统。
回答by 2upmedia
Pretty simple:
很简单：
<script type="text/javascript">
(function($) {
$(function() {
$("#accordion > div").accordion({ header: "h3", collapsible: true });
})
})(jQuery);
</script>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
回答by MvanGeest
This was originally discussedin the jQuery UI documentation for Accordion:
这最初在Accordion的jQuery UI 文档中讨论过：
NOTE: If you want multiple sections open at once, don't use an accordion
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });Or animated:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
注意：如果您想一次打开多个部分，请不要使用手风琴
手风琴不允许同时打开多个内容面板，这需要付出很多努力。如果您正在寻找允许打开多个内容面板的小部件，请不要使用它。通常它可以用几行 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(); });
"I may be an idiot" - You're not an idiot if you don't read the documentation, but if you're having problems, it usually speeds up finding a solution.
“我可能是个白痴” - 如果您不阅读文档，您就不是白痴，但如果您遇到问题，通常会加快找到解决方案的速度。
回答by Boaz - Reinstate Monica
Posted this in a similar thread, but thought it might be relevant here as well.
将此发布在一个类似的线程中，但认为它也可能与此处相关。
Achieving this with a single instance of jQuery-UI Accordion
使用 jQuery-UI Accordion 的单个实例实现这一点
As others have noted, the Accordionwidget does not have an API option to do this directly. However, if for some reason you mustuse the widget (e.g. you're maintaining an existing system), 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; // Cancels the default action
}
});
See a jsFiddle demo
看一个jsFiddle 演示
回答by Roman Gudkov
Or even simpler?
或者更简单？
<div class="accordion">
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div class="accordion">
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div class="accordion">
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
$(".accordion").accordion({ collapsible: true, active: false });
</script>
回答by Anas Nakawa
I have done a jQuery plugin that has the same look of jQuery UI Accordion and can keep all tabs\sections open
我已经完成了一个 jQuery 插件，它具有与 jQuery UI Accordion 相同的外观，并且可以保持所有选项卡\部分打开
you can find it here
你可以在这里找到它
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
works with the same markup
使用相同的标记
<div id="multiOpenAccordion">
<h3><a href="#">tab 1</a></h3>
<div>Lorem ipsum dolor sit amet</div>
<h3><a href="#">tab 2</a></h3>
<div>Lorem ipsum dolor sit amet</div>
</div>
Javascript code
Javascript代码
$(function(){
$('#multiOpenAccordion').multiAccordion();
// you can use a number or an array with active option to specify which tabs to be opened by default:
$('#multiOpenAccordion').multiAccordion({ active: 1 });
// OR
$('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });
$('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});
UPDATE: the plugin has been updated to support default active tabs option
更新：插件已更新以支持默认的活动选项卡选项
UPDATE: This plugin is now deprecated.
更新：此插件现已弃用。
回答by Donovan
Actually was searching the internet for a solution to this for a while. And the accepted answer gives the good "by the book" answer. But I didn't want to accept that so I kept searching and found this:
实际上是在互联网上搜索了一段时间的解决方案。接受的答案给出了很好的“书本”答案。但我不想接受，所以我继续搜索并找到了这个：
http://jsbin.com/eqape/1601/edit- Live Example
http://jsbin.com/eqape/1601/edit- 现场示例
This example pulls in the proper styles and adds the functionality requested at the same time, complete with space to write add your own functionality on each header click. Also allows multiple divs to be in between the "h3"s.
此示例引入了正确的样式并同时添加了请求的功能，并在每次标题单击时留出空间来添加您自己的功能。还允许多个 div 位于“h3”之间。
$("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
.hover(function() { $(this).toggleClass("ui-state-hover"); })
.prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.click(function() {
$(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
.next().toggleClass("ui-accordion-content-active").slideToggle();
return false;
})
.next()
.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
.hide();
HTML code:
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion styles</title>
<!-- jQuery UI | http://jquery.com/ http://jqueryui.com/ http://jqueryui.com/docs/Theming -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body>
<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3><a href="#">Section 1</a></h3>
<div class="content">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div>
<h3><a href="#">Section 2</a></h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</div>
<h3><a href="#">Section 3</a></h3>
<div class="top">
Top top top top
</div>
<div class="content">
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<div class="bottom">
Bottom bottom bottom bottom
</div>
<h3><a href="#">Section 4</a></h3>
<div>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</div>
</div>
</body>
</html>`
回答by SpritsDracula
I found a tricky solution. Lets call the same function twice but with different id.
我找到了一个棘手的解决方案。让我们用不同的 id 调用同一个函数两次。
JQuery Code
查询代码
$(function() {
$( "#accordion1" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
$( "#accordion2" ).accordion({
collapsible: true, active: false, heightStyle: "content"
});
});
HTML Code
HTML代码
<div id="accordion1">
<h3>Section 1</h3>
<div>Section one Text</div>
</div>
<div id="accordion2">
<h3>Section 2</h3>
<div>Section two Text</div>
</div>
回答by Azeem
Simple, create multiple accordian div each representating one anchor tag like:
简单，创建多个手风琴 div，每个代表一个锚标签，如：
<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>
It adds up some markup. But works like a pro...
它增加了一些标记。但像专业人士一样工作......
回答by Giovan Cruz
Simple: active the accordion to a class, and then create divs with this, like multiples instances of accordion.
简单：将手风琴激活到一个类，然后用它创建 div，就像手风琴的多个实例一样。
Like this:
像这样：
JS
JS
$(function() {
$( ".accordion" ).accordion({
collapsible: true,
clearStyle: true,
active: false,
})
});
HTML
HTML
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
<div class="accordion">
<h3>Title</h3>
<p>lorem</p>
</div>
回答by Funkodebat
Just call each section of the accordion as its own accordion. active: n will be 0 for the first one( so it will display) and 1, 2, 3, 4, etc for the rest. Since each one is it's own accordion, they will all have only 1 section, and the rest will be collapsed to start.
只需将手风琴的每个部分称为自己的手风琴即可。active：第一个 n 将为 0（因此它会显示），其余为 1、2、3、4 等。由于每一个都是它自己的手风琴，所以它们都只有1个部分，其余的将折叠起来开始。
$('.accordian').each(function(n, el) {
$(el).accordion({
heightStyle: 'content',
collapsible: true,
active: n
});
});
