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'); 
    });
});

Alternate 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

Answer 2

由于某种原因，上述解决方案对我不起作用即; $（ 'openMe '）的触发器（' 崩溃'）。和$（'。openMe'）。触发器（'expand'）;没有用。

所以，我稍微改写了这个方法。

Javascript代码将如下所示

$('#openAll').on('click', function() {
        $(".ui-collapsible-heading").removeClass("ui-collapsible-heading-collapsed");
        $(".ui-collapsible-content").removeClass("ui-collapsible-content-collapsed");
        $(".ui-collapsible-heading a").addClass("ui-icon-minus").removeClass("ui-icon-plus");

}）;

$('#closeAll').on('click', function() {
        $(".ui-collapsible-heading").addClass("ui-collapsible-heading-collapsed");
        $(".ui-collapsible-content").addClass("ui-collapsible-content-collapsed");
        $(".ui-collapsible-heading a").removeClass("ui-icon-minus").addClass("ui-icon-plus");

}）;

即;使用jquery添加和删除所需的类。

jsfiddle for the same

Answer 3

我偶然发现了这篇文章，同时试图找出为什么它不适用于一个可折叠的设备，正如菲尔所说，这是不可能的，因为一次只能打开一个。

它可能不是合适的解决方案，但我能够模仿可折叠集的外观，同时通过将以下CSS添加到可折叠本身来使其成为简单的可折叠：

.collapsible { margin: -1px 0 0; border-radius: 0; }

这允许我使用

打开和关闭所有这些

$('.collapsible').collapsible('expand');
$('.collapsible').collapsible('collapse');

Answer 4

假设您所有可折叠的div都有一个共同的父级：

$("#parent-id").children().collapsible("collapse");

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

4 个答案: