jQuery UI手风琴，保持多个部分打开？
我可能是一个白痴，但你如何保持jQuery UI手风琴的多个部分打开？ 演示全部只有一次打开…我正在寻找一个可折叠的菜单types系统。
这最初是在Accordion的jQuery UI文档中 讨论的：
注：如果您想一次打开多个部分，请勿使用手风琴
手风琴不允许同时打开多个内容面板，而且要做很多工作。 如果您正在查找允许多个内容面板打开的小部件，请不要使用它。 通常它可以用几行jQuery代替，如下所示：
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });或animation：
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });
“我可能是一个白痴” – 如果你没有阅读文档，你不是一个白痴，但如果你有问题，通常会加快find解决scheme。
很简单：
<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>
发表在类似的线程，但认为这也可能是相关的。
用jQuery-UI Accordion的单个实例来实现这一点
正如其他人所指出的， 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 } });
看到一个jsFiddle演示
甚至更简单？
<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>
我做了一个jQuery插件，它具有与jQuery UI Accordion相同的外观，并可以保持所有的标签\部分打开
你可以在这里find它
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
使用相同的标记
<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代码
$(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 });
更新：插件已更新，以支持默认的活动标签选项
我发现一个棘手的解决scheme。 让我们调用相同的函数两次，但不同的ID。
JQuery代码
$(function() { $( "#accordion1" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); $( "#accordion2" ).accordion({ collapsible: true, active: false, heightStyle: "content" }); });
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>
实际上是在互联网上寻找解决办法。 被接受的答案给出了“靠书”的良好答案。 但我不想接受，所以我一直在search，发现这一点：
http://jsbin.com/eqape/1601/edit – 现场示例
这个例子引入了正确的样式，同时添加了请求的function，完成了写入空间，在每个标题点击添加自己的function。 也允许多个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代码：
<!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>`
简单，创build多个手风琴div，每个代表一个锚点标签，如：
<div> <div class="accordion"> <a href = "#">First heading</a> </div> <div class="accordion"> <a href = "#">First heading</a> </div> </div>
它加起来一些标记。 但像一个亲…
简单：将手风琴激活到一个class级，然后用这个创builddiv，就像手风琴的多个实例一样。
喜欢这个：
JS
$(function() { $( ".accordion" ).accordion({ collapsible: true, clearStyle: true, active: false, }) });
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>
只要将手风琴的每一部分作为自己的手风琴即可。 active：n对于第一个（所以它会显示）将是0，其余的是1,2,3,4等。 由于每一个都是自己的手风琴，他们都只有一个部分，其余的部分将会崩溃开始。
$('.accordian').each(function(n, el) { $(el).accordion({ heightStyle: 'content', collapsible: true, active: n }); });
更简单一些，在每个li标签的类属性中加上标签，并让jquery遍历每个li来初始化手风琴。
打开jquery-ui – *。js
find$.widget( "ui.accordion", {
find_eventHandler: function( event ) { inside
更改
var options = this.options, active = this.active, clicked = $( event.currentTarget ), clickedIsActive = clicked[ 0 ] === active[ 0 ], collapsing = clickedIsActive && options.collapsible, toShow = collapsing ? $() : clicked.next(), toHide = active.next(), eventData = { oldHeader: active, oldPanel: toHide, newHeader: collapsing ? $() : clicked, newPanel: toShow };
至
var options = this.options, clicked = $( event.currentTarget), clickedIsActive = clicked.next().attr('aria-expanded') == 'true', collapsing = clickedIsActive && options.collapsible; if (clickedIsActive == true) { var toShow = $(); var toHide = clicked.next(); } else { var toShow = clicked.next(); var toHide = $(); } eventData = { oldHeader: $(), oldPanel: toHide, newHeader: clicked, newPanel: toShow };
在active.removeClass( "ui-accordion-header-active ui-state-active" );之前active.removeClass( "ui-accordion-header-active ui-state-active" );
add if (typeof(active) !== 'undefined') { and closing }
请享用
你只是使用jquery each（）函数;
$(function() { $( ".selector_class_name" ).each(function(){ $( this ).accordion({ collapsible: true, active:false, heightStyle: "content" }); }); });
没有jQuery-UI手风琴，可以简单地做到这一点：
<div class="section"> <div class="section-title"> Section 1 </div> <div class="section-content"> Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> </div> <div class="section"> <div class="section-title"> Section 2 </div> <div class="section-content"> Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. </div> </div>
和js
$( ".section-title" ).click(function() { $(this).parent().find( ".section-content" ).slideToggle(); });
