在JQuery Mobile中展开/折叠所有手风琴

Question

我正在使用JQuery Mobile开发，并且页面上有很多手风琴。我想通过按钮点击一次性展开/折叠所有手风琴。这应该如何实现？

- Gautam Krishnan

---

请发布一些代码，以便我们可以看到您是如何实现这个的。 - Drew Baker

这是创建可折叠（手风琴）的基本方法，我有许多这样重复的div，但它没有任何函数可以调用来展开/折叠。`<div data-role="collapsible" data-theme="a" data-content-theme="a"> <h3>Header swatch A</h3> <p>I'm the collapsible content with a themed content block set to "A".</p></div>` - Gautam Krishnan

你尝试过什么？你使用的是什么类型的代码？这不是一个真正的问题，请阅读：http://stackoverflow.com/questions/how-to-ask - Jasper

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

- Phill Pafford

---

你能否通过移除.each来缩短它？例如$('.openMe').trigger('expand')和$('.closeAll').trigger('collapse')？ - Andy

很好，我喜欢jQuery Mobile，虽然没有太多机会适当地使用它，但它总是看起来那么漂亮！ - Andy

由于您和@Andy的帮助，这段代码运行良好。然而，我正在以此处中动态添加手风琴，但它不起作用。另外，在这种情况下，我甚至无法触发警报。 - Gautam Krishnan

我不知道这个东西何时确切地被更改，但如果它无法正常工作，您应该使用“collapsible”而不是“trigger”。 - Dracontis

Answer 2

由于某些原因，上述解决方案对我不起作用。例如：$('.openMe').trigger('collapse');和$('.openMe').trigger('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链接

- Jacob Nelson

---

“trigger” 可以替换为 “collapsible”。 - Dracontis

Answer 3

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

，最初的回答是：

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

- Jordan Teague

Answer 4

我在尝试弄清楚为什么它不能在可折叠集上工作时偶然发现了这篇文章，正如Phil所提到的那样，这是不可能的，因为一次只能打开一个。

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

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

这样我就可以使用它来打开和关闭它们了。

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

- Kevin Reilly