Question

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

<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”，但仍然没有按扩展方式加载。

任何人都可以帮我修复此问题或任何列出可与可折叠内容一起使用的属性或属性的网址

Answer 1

为了简化以下代码，只需假设第一个可折叠块具有id ='first'而第二个具有id ='second'，因此请使用：

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

Answer 2

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

适用于JQM 1.4

Collapsed Option

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

Answer 4

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

动态扩展和折叠Jquery Mobile Collapsible内容中的部分

4 个答案: