动态扩展和折叠 Jquery Mobile 可折叠内容中的部分答案

【问题标题】：Dynamically expanding and collapsing the sections in Jquery Mobile Collapsible content动态扩展和折叠 Jquery Mobile 可折叠内容中的部分
【发布时间】：2011-09-07 10:16:23
【问题描述】：

我创建了一个可折叠的内容，其中包含如下所述的部分

<div data-role="collapsible-set">

<div data-role="collapsible" data-collapsed="false">
<h3>Section A</h3>
<p>I'm the collapsible set content for section B.</p>
</div>

<div data-role="collapsible">
<h3>Section B</h3>
<p>I'm the collapsible set content for section B.</p>
</div>

上面的块创建了一个包含两个部分的可折叠内容，第二部分展开了。

我想展开第一部分展开，第二部分折叠。一旦我在第一部分执行任何操作，第二部分应该展开，第一部分应该折叠。

我尝试动态更改属性 data-collapsed="true" 但它仍然没有加载为展开状态。

谁能帮我解决这个问题或任何列出可与可折叠内容一起使用的属性或属性的 URL

【问题讨论】：

标签： jquery mobile jquery-mobile

【解决方案1】：

为了简化下面的代码，假设第一个可折叠块的 id = 'first'，第二个有 id='second'，所以使用：

$('#blockFirst').trigger('expand');
$('#blockSecond').trigger('collapse');

【讨论】：

这对我有帮助，谢谢！只是为了完成答案，它也适用于不使用data-role="collapsible-set"。

【解决方案2】：

$("#block").collapsible( "option", "collapsed", false );

适用于 JQM 1.4

Collapsed Option

【讨论】：

【解决方案3】：

jQuery Mobile 将在视觉上将一组可折叠项设置为一个组，并使该组的行为类似于手风琴，如果您将可折叠项包装在具有属性 data-role 的 div 中，则一次只能打开一个可折叠项="collapsibleset"。

<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>Section 1</h3>
<p>I'm the collapsibleset content for section 1. My content is initially visible.</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsibleset content for section 2.</p>
</div>
</div>

【讨论】：

【解决方案4】：

从第一部分中删除“data-collapsed="false" 并将 data-collapsed="true" 添加到第二部分。您不必动态进行任何更改。上述更改将根据您的要求进行。

【讨论】：