动态展开和折叠 Jquery Mobile 可折叠内容中的部分
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7332205/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically expanding and collapsing the sections in Jquery Mobile Collapsible content
提问by Prasad
I have created a collapsible content with sections as mentioned below
我创建了一个可折叠的内容，其中包含如下所述的部分
<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>
The above block creates a collapsible content with two sections with second section expanded.
上面的块创建了一个包含两个部分的可折叠内容，第二部分被展开。
I would like to expand the first section expanded and second section as collapsed. Once I perform any action in first section the second section should expand and the first section should be collapsed.
我想将第一部分展开，将第二部分展开为折叠。一旦我在第一部分执行任何操作，第二部分应该展开并且第一部分应该折叠。
I tried changing the property data-collapsed="true" dynamically but still it doesn't load as expanded.
我尝试动态更改属性 data-collapsed="true" 但它仍然没有像扩展那样加载。
Can any one help me in fixing this issue or any URL which lists the properties or attributes that can be used along with collapsible content
任何人都可以帮助我解决此问题或任何列出可与可折叠内容一起使用的属性或属性的 URL
回答by pazur
To simplify code below just assume that first collapsible block has id = 'first' and second has id='second', so use:
为了简化下面的代码，假设第一个可折叠块具有 id = 'first' 并且第二个具有 id='second'，因此使用：
$('#blockFirst').trigger('expand');
$('#blockSecond').trigger('collapse');
回答by Richard Fox
$("#block").collapsible( "option", "collapsed", false );
Works with JQM 1.4
适用于 JQM 1.4
回答by chirag Nandwani
jQuery Mobile will visually style a set of collapsibles as a group and will make the set behave like an accordion in that only one collapsible can be open at a time if you wrap the collapsibles in a div that has the attribute data-role="collapsibleset".
jQuery Mobile 会将一组可折叠组件从视觉上设置为一个组，并使该集合的行为类似于手风琴，因为如果将可折叠组件包装在具有属性 data-role="collapsibleset 的 div 中，则一次只能打开一个可折叠组件”。
<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>
回答by Bala
Remove "data-collapsed="false" from first section and add data-collapsed="true" to the second section. You don't have to make any changes dynamically. That above change will work as required by you.
从第一部分中删除 "data-collapsed="false" 并将 data-collapsed="true" 添加到第二部分。您不必动态进行任何更改。上述更改将根据您的需要工作。
