多个jQuery Mobile可折叠：在任何时候只有一个可折叠的打开

Question

有没有什么办法让jQuery Mobile可折叠元素关闭所有其他展开的可折叠元素，只要展开另一个可折叠元素？

这是因为在我的可折叠列表中，我只想随时扩展一个项目。

我检查了文档，发现了一个事件，只要你展开一个可折叠的东西就会触发。我将它包含在下面的<script>标记中。我不确定这是否是这样做的最佳方式，或者是否有其他简单的方法。而且我也不知道如何遍历文档来关闭所有打开的可折叠文件。

<div data-role="collapsible"> 
    <h3>Item 1</h3> 
    <p>Content 1</p> 
</div> 
<div data-role="collapsible"> 
    <h3>Item 2</h3> 
    <p>Content 2</p> 
</div> 
<script> 
    $(".selector").collapsible({ 
     expand: function(event, ui) { 
     // code here to close all opened collapsibles, but i need input how to do this 
     } 
    }); 
</script> 

Answer 1

答案很简单。

jQuery Mobile的将视觉风格的一组collapsibles为一组，并会设定行为像在只有一个可折叠的手风琴可以同时打开，如果你包裹collapsibles在具有属性的DIV数据角色=“collapsibleset”。

http://api.jquerymobile.com/collapsibleset/

使得最终代码：

<div data-role="collapsible-set"> 
    <div data-role="collapsible"> 
    <h3>Item 1</h3> 
    <p>Content 1</p> 
    </div> 
    <div data-role="collapsible"> 
    <h3>Item 2</h3> 
    <p>Content 2</p> 
    </div> 
</div>