手风琴在JQuery Mobile中崩溃/扩展

Question

我正在使用JQuery Mobile,我的页面上有一堆手风琴.我想一键扩展/折叠所有手风琴,只需点击一下按钮.如何才能做到这一点？

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