5

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

4

4 回答 4

11

这样的事情有用吗？

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>
​

文件：

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

设置文档：

于 2012-07-03T20:07:31.067 回答
3

由于某种原因，上述解决方案对我不起作用，即；$('.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");

});

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

相同的jsfiddle

于 2014-05-25T11:13:54.610 回答
2

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

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

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

然后，这使我可以使用

$('.collapsible').collapsible('expand');
$('.collapsible').collapsible('collapse');
于 2014-07-29T05:39:46.867 回答
2

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

$("#parent-id").children().collapsible("collapse");
于 2019-01-30T17:06:51.540 回答