Динамическое развертывание и свертывание разделов в Jquery Mobile Разборный контент

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", но все равно оно не загружается как расширенное.

Может ли кто-нибудь помочь мне в устранении этой проблемы или любой URL-адрес, в котором перечислены свойства или атрибуты, которые можно использовать вместе со складным содержимым

Answer 1

Чтобы упростить приведенный ниже код, просто предположим, что первый разборный блок имеет id = 'first', а second - id = 'second', поэтому используйте:

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

Answer 2

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

Работает с JQM 1.4

Свернутая опция

Answer 3

jQuery Mobile будет визуально оформлять набор складных объектов как группу и заставлять набор вести себя как гармошка, поскольку за один раз можно открыть только одну складную сборку, если вы оберните складные элементы в элемент div с атрибутом data-роль = "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 »во второй раздел. Не нужно вносить какие-либо изменения динамически. Это изменение будет работать в соответствии с вашими требованиями.