Я создаю небольшой список коллапселей jQuery Monile. Это структура:
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
<div data-role="collapsible">
Text content
</div
<div data-role="collapsible">
Text content
</div >
</div >
Как я могу открыть все разборные элементы сразу при нажатии кнопки?
Виджет collapsibleset позволяет только один раз открывать сборку за один раз по дизайну. Если вам нужен внешний вид сбрасываемого набора без поведения, удалите data-role="collapsibleset"
и вместо этого добавьте class="ui-collapsible-set"
:
<div id="theSet" class="ui-collapsible-set" >
<div data-role="collapsible" >
<h3>Title 1</h3>
Text content 1
</div>
<div data-role="collapsible" >
<h3>Title 2</h3>
Text content 2
</div>
<div data-role="collapsible" >
<h3>Title 3</h3>
Text content 3
</div >
</div >
UPDATE: чтобы развернуть все, нажмите кнопку. Чтобы все развернуть все и свернуть все кнопки, выполните следующие действия:
<div class="ui-grid-a">
<div class="ui-block-a"><a id="btnExpand" class="ui-btn ui-corner-all collapseExpand">Expand All</a>
</div>
<div class="ui-block-b"><a id="btnCollapse" class="ui-btn ui-corner-all collapseExpand">Collapse All</a>
</div>
</div>
Создайте обработчик для кнопок и пользователя .collapsible("option", "collapsed", true or false);
с селектором, который возвращает все совпадения в наборе:
$(document).on("click", ".collapseExpand", function(){
var collapseAll = this.id == "btnCollapse";
$('#theSet [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll);
});
Обновлено DEMO
Вы можете найти эту статью интересной: http://jqmtricks.wordpress.com/2014/04/25/filterable-opens-matching-collapsibles/, поскольку она включает в себя расширение всех и сворачивание всех, а также использование фильтруемого виджета для открытия сопоставления складывается при вводе в поле поиска.
.collapsible("collapse / expand")
короче;)