jquery - JQuery Mobile 中的 Accordion 折叠/展开全部

Question

我正在使用 JQuery Mobile，我的页面上有一堆 Accordion 。我想通过单击按钮立即展开/折叠所有 Accordion 。如何做到这一点？

Answer 1

这样的东西有用吗？

• http://jsfiddle.net/UUhMa/
• http://jsfiddle.net/UUhMa/3/ (没有 foreach )

JS

$('#openAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('expand');
    });
});
$('#closeAll').on('click', function() {
    $('.openMe').each(function() {
        var coll = $(this);
        coll.trigger('collapse'); 
    });
});

替代 JS(不带 foreach ):

$('#openAll').on('click', function() {
    $('.openMe').trigger('expand');
});
$('#closeAll').on('click', function() {
    $('.openMe').trigger('collapse');
});

HTML

<div data-role="collapsible" class="openMe">
   <h3>Hello 1</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div data-role="collapsible" class="openMe">
   <h3>Hello 2</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<div data-role="collapsible" class="openMe">
   <h3>Hello 3</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>
<br />
<a href="#" data-role="button" id="openAll">Open All Collapsible</a>
<a href="#" data-role="button" id="closeAll">Close All Collapsible</a>
​

文档:

• http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible.html

看起来这不适用于一组，因为一次只能打开一个:

• http://jsfiddle.net/UUhMa/1/

设置文档:

• http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html