点击时折叠jQuery手风琴

Question

我使用jQuery创建了一个手风琴，当用户点击第二个选项时它可以很好地折叠，但我也希望有选择再次点击标题时可以折叠已打开的面板的选项。我该怎么做？

以下是我用于创建手风琴的现有jQuery代码：

$("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null, });

以下是HTML代码：

<div id="accordion">

    <h2>Heading 1</h2>
    <div class="pane">... pane content ...</div>
    
    <h2>Heading 2</h2>
    <div class="pane">... pane content ...</div>
    
    <h2>Heading 2</h2>
    <div class="pane">... pane content ...</div>

</div>

- GStubbenhagen

Answer 1

//Initialize a accordion with the collapsible option specified.
$( ".selector" ).accordion({ collapsible: true });
//Get or set the collapsible option, after init.
//getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
//setter
$( ".selector" ).accordion( "option", "collapsible", true );

来源：http://jqueryui.com/demos/accordion/#option-collapsible

在这个演示中查找：http://jsfiddle.net/2DaR6/

- user993563

---

太好了！很抱歉晚才接受，我在将它从fiddle中移植出来时遇到了一些困难；结果发现是一个过时的JQuery库（低级错误！），改用Google Libraries API后现在完美运行！ - GStubbenhagen

Answer 2

您是指这个演示中的效果吗？

点击选定的标签以切换其内容的关闭/打开。要启用此功能，请将可折叠的选项设置为true。

collapsible: true

- suhair