blocks|key|956715|text|我已经做了一个jQuery插件，具有相同的外观jQuery+UI+Accordion，并可以保持所有的标签\部分打开|type|unstyled|depth|inlineStyleRanges|entityRanges|data|956716|你都能在这找到你的需要|956717|http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/|offset|length|956718|使用相同的标记|956719|<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>|code-block|syntax|javascript|956720|Javascript代码|956721|$(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
});|956722|更新:插件已更新为支持默认的活动选项卡选项|956723|更新:这个插件现在被弃用了。|956724|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|22|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@$F|16|G|17|1|18]]|A|$]]|$1|H|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1E|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|E]]]]

<p>I have done a jQuery plugin that has the same look of jQuery UI Accordion and can keep all tabs\sections open</p>

<p>you can find it here <br></p>

<p><a href="http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/" rel="nofollow noreferrer">http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/</a><br></p>

<p>works with the same markup</p>

<pre><code>&lt;div id="multiOpenAccordion"&gt;
        &lt;h3&gt;&lt;a href="#"&gt;tab 1&lt;/a&gt;&lt;/h3&gt;
        &lt;div&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;tab 2&lt;/a&gt;&lt;/h3&gt;
        &lt;div&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Javascript code</p>

<pre><code>$(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
});
</code></pre>

<p>UPDATE:
the plugin has been updated to support default active tabs option</p>

<p>UPDATE:
This plugin is now deprecated. </p>


blocks|key|956729|text|非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|956730|<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>|code-block|syntax|javascript|956731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Pretty simple:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    (function($) {
        $(function() {
            $("#accordion &gt; div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
&lt;/script&gt;

&lt;div id="accordion"&gt;
    &lt;div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/h3&gt;
        &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/h3&gt;
        &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
        &lt;h3&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/h3&gt;
        &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1171099|text|或者甚至更简单？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171100|<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>|code-block|syntax|javascript|1171101|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Or even simpler?</p>

<pre><code>&lt;div class="accordion"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/h3&gt;
    &lt;div&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.&lt;/div&gt;
&lt;/div&gt;    
&lt;div class="accordion"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/h3&gt;
    &lt;div&gt;Phasellus mattis tincidunt nibh.&lt;/div&gt;
&lt;/div&gt;         
&lt;div class="accordion"&gt;
    &lt;h3&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/h3&gt;
    &lt;div&gt;Nam dui erat, auctor a, dignissim quis.&lt;/div&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;
    $(".accordion").accordion({ collapsible: true, active: false });
&lt;/script&gt;
</code></pre>


blocks|key|1171163|text|只需将手风琴的每个部分称为自己的手风琴即可。active:第一个N为0(因此将显示)，其余为1、2、3、4，依此类推。由于每一个都是它自己的手风琴，它们都将只有一个部分，其余的将折叠开始。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171164|$('.accordian').each(function(n,+el)+{
++$(el).accordion({
++++heightStyle:+'content',
++++collapsible:+true,
++++active:+n
++});
});|code-block|syntax|javascript|1171165|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});
</code></pre>


blocks|key|956850|text|更简单的方法是，在每个li标记的class属性中标记它，并让jquery遍历每个li以初始化accordion。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|956851|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Even simpler, have it labeled in each li tag's class attribute and have jquery to loop through each li to initialize the accordion.</p>


blocks|key|1171260|text|实际上，我在互联网上搜索了一段时间来解决这个问题。被接受的答案给出了好的“照本宣科”的答案。但我不想接受，所以我继续搜索，找到了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171261|http://jsbin.com/eqape/1601/edit+-现场示例|offset|length|1171262|这个示例引入了适当的样式，同时添加了所需的功能，并在每次单击页眉时都有空间来编写添加您自己的功能。还允许在“h3”之间有多个div。|1171263|+$("#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();|code-block|syntax|javascript|1171264|HTML代码：|1171265|<!DOCTYPE+html>
<html+lang="en">
<head>
<meta+charset="UTF-8"+/>
<title>Toggle+Panels+(not+accordion)+using+ui-accordion++styles</title>


<style+type="text/css">body{font:62.5%25+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>`|1171266|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/eqape/1601/edit^0|0|0|W|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>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: </p>

<p><a href="http://jsbin.com/eqape/1601/edit" rel="noreferrer">http://jsbin.com/eqape/1601/edit</a> - Live Example</p>

<p>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.</p>

<pre><code> $("#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('&lt;span class="ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;')
    .click(function() {
      $(this).find("&gt; .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();
</code></pre>

<p>HTML code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;Toggle Panels (not accordion) using ui-accordion  styles&lt;/title&gt;

&lt;!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  --&gt;
&lt;style type="text/css"&gt;body{font:62.5% Verdana,Arial,sans-serif}&lt;/style&gt;
&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" /&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"&gt;&lt;/script&gt;


&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;Toggle Panels&lt;/h1&gt;
&lt;div id="notaccordion"&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Section 1&lt;/a&gt;&lt;/h3&gt;
  &lt;div class="content"&gt;
    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.
  &lt;/div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Section 2&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
    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.
  &lt;/div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Section 3&lt;/a&gt;&lt;/h3&gt;
  &lt;div class="top"&gt;
  Top top top top
  &lt;/div&gt;
  &lt;div class="content"&gt;
    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.
    &lt;ul&gt;
      &lt;li&gt;List item one&lt;/li&gt;
      &lt;li&gt;List item two&lt;/li&gt;
      &lt;li&gt;List item  three&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="bottom"&gt;
  Bottom bottom bottom bottom
  &lt;/div&gt;
  &lt;h3&gt;&lt;a href="#"&gt;Section 4&lt;/a&gt;&lt;/h3&gt;
  &lt;div&gt;
    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.
  &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;`
</code></pre>


blocks|key|1171495|text|简单地，创建多个折叠div，每个div表示一个锚标记，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171496|<div>
<div+class="accordion">
<a+href+=+"#">First+heading</a>
</div>
<div+class="accordion">
<a+href+=+"#">First+heading</a>
</div>
</div>|code-block|syntax|javascript|1171497|它添加了一些标记。但工作起来就像个职业选手。|1171498|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Simple, create multiple accordian div each representating one anchor tag like:</p>

<pre><code>&lt;div&gt;
&lt;div class="accordion"&gt;
&lt;a href = "#"&gt;First heading&lt;/a&gt;
&lt;/div&gt;
&lt;div class="accordion"&gt;
&lt;a href = "#"&gt;First heading&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>It adds up some markup. But works like a pro...</p>


blocks|key|957156|text|打开jquery-ui-*.js|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957157|查找$.widget(+"ui.accordion",+{|offset|length|style|CODE|957158|在内部查找_eventHandler:+function(+event+)+{|957159|变化|957160|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++++++++++++};|code-block|syntax|javascript|957161|至|957162|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
++++};|957163|在active.removeClass(+"ui-accordion-header-active+ui-state-active"+);之前|957164|添加if+(typeof(active)+!==+'undefined')+{并关闭}|957165|尽情享受|957166|entityMap^0|0|2|R|0|5|Y|0|0|0|0|0|1|1V|0|2|11|16|1|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@$D|17|E|18|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|19|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1A|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1C|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1G|8|@$D|1H|E|1I|F|G]|$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|11|$]]

<p>open jquery-ui-*.js</p>

<p>find <code>$.widget( "ui.accordion", {</code> </p>

<p>find <code>_eventHandler: function( event ) {</code> inside</p>

<p>change </p>

<pre><code>var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive &amp;&amp; options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };
</code></pre>

<p>to </p>

<pre><code>var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive &amp;&amp; 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
    };
</code></pre>

<p>before <code>active.removeClass( "ui-accordion-header-active ui-state-active" );</code></p>

<p>add <code>if (typeof(active) !== 'undefined') {</code> and closing <code>}</code></p>

<p>enjoy</p>


blocks|key|957210|text|简单:将accordion激活到一个类，然后用它创建div，就像accordion的多个实例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957211|如下所示：|957212|JS|957213|$(function()+{
++++$(+".accordion"+).accordion({
++++++++collapsible:+true,
++++++++clearStyle:+true,
++++++++active:+false,
++++})
});|code-block|syntax|javascript|957214|HTML|957215|<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>|957216|https://jsfiddle.net/sparhawk_odin/pm91whz3/|offset|length|957217|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|18|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|15|8|@]|9|@$Q|16|R|17|1|18]]|A|$]]|$1|S|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|P]]]]

<p>Simple: active the accordion to a class, and then create divs with this, like multiples instances of accordion.</p>

<p>Like this:</p>

<p>JS</p>

<pre><code>$(function() {
    $( ".accordion" ).accordion({
        collapsible: true,
        clearStyle: true,
        active: false,
    })
});
</code></pre>

<p>HTML</p>

<pre><code>&lt;div class="accordion"&gt;
    &lt;h3&gt;Title&lt;/h3&gt;
    &lt;p&gt;lorem&lt;/p&gt;
&lt;/div&gt;
&lt;div class="accordion"&gt;
    &lt;h3&gt;Title&lt;/h3&gt;
    &lt;p&gt;lorem&lt;/p&gt;
&lt;/div&gt;
&lt;div class="accordion"&gt;
    &lt;h3&gt;Title&lt;/h3&gt;
    &lt;p&gt;lorem&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://jsfiddle.net/sparhawk_odin/pm91whz3/" rel="nofollow">https://jsfiddle.net/sparhawk_odin/pm91whz3/</a></p>


blocks|key|957242|text|您只需使用jquery+each()函数；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957243|$(function()+{
++++$(+".selector_class_name"+).each(function(){
++++++++$(+this+).accordion({
++++++++++collapsible:+true,+
++++++++++active:false,
++++++++++heightStyle:+"content"
++++++++});
++++});
});|code-block|syntax|javascript|957244|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You just use jquery each() function ;</p>

<pre><code>$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});
</code></pre>


blocks|key|957287|text|没有jQuery-UI+accordion，可以简单地这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|957288|<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>|code-block|syntax|javascript|957289|和js|957290|$(+".section-title"+).click(function()+{
++++$(this).parent().find(+".section-content"+).slideToggle();
});|957291|https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/|offset|length|957292|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1B|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>Without jQuery-UI accordion, one can simply do this:</p>

<pre><code>&lt;div class="section"&gt;
  &lt;div class="section-title"&gt;
    Section 1
  &lt;/div&gt;
  &lt;div class="section-content"&gt;
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="section"&gt;
  &lt;div class="section-title"&gt;
    Section 2
  &lt;/div&gt;
  &lt;div class="section-content"&gt;
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And js</p>

<pre><code>$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});
</code></pre>

<p><a href="https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/" rel="nofollow noreferrer">https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/</a></p>


blocks|key|1171738|text|我知道这个问题特别要求使用jQuery+UI。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1171739|我总是发现自己在探索jQuery+UI+Accordion，然后记住我只能使用本机细节和摘要元素(IE11除外)来实现本质上相同类型的功能：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details|offset|length|1171740|只是提醒一下，以防你像我一样经常忘记。|1171741|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details^0|0|1Y|1T|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

<p>I know this question specifically asks for jQuery UI.</p>
<p>I always find myself exploring jQuery UI Accordion and then remembering that I can just use the native DETAILS and SUMMARY elements (except for IE11) to implement essentially the same type of feature: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details</a></p>
<p>Just a reminder in case you forget as often as I do.</p>


<p>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.</p>


jQuery UI accordion that keeps multiple sections open?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我可能是个笨蛋，但如何在jQuery UI的手风琴中保持多个部分处于打开状态呢？所有的演示一次只有一个打开...我正在寻找一个可折叠的菜单类型的系统。

问保持多个部分打开的jQuery UI折叠功能？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问保持多个部分打开的jQuery UI折叠功能？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问保持多个部分打开的jQuery UI折叠功能？
EN