我正在使用JQuery Mobile开发,并且页面上有很多手风琴。我想通过按钮点击一次性展开/折叠所有手风琴。这应该如何实现?
像这样的代码能够正常工作吗?
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>
文档:
看起来这个东西在集合上不起作用,因为只能同时打开一个:
集合文档:
$('#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添加和删除所需的类。
$("#parent-id").children().collapsible("collapse");
我在尝试弄清楚为什么它不能在可折叠集上工作时偶然发现了这篇文章,正如Phil所提到的那样,这是不可能的,因为一次只能打开一个。
这可能不是合适的解决方案,但是我能够通过将以下CSS添加到可折叠内容本身来模仿可折叠集的外观,同时使其成为一个简单的可折叠内容:
.collapsible { margin: -1px 0 0; border-radius: 0; }
$('.collapsible').collapsible('expand');
$('.collapsible').collapsible('collapse');