Свернуть / Развернуть складные объекты динамически

0

Я создаю небольшой список коллапселей 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 >

Как я могу открыть все разборные элементы сразу при нажатии кнопки?

  • 0
    Версию JQM вы используете?
  • 0
    jquery.mobile-1.4.2
Теги:
jquery-mobile

1 ответ

1
Лучший ответ

Виджет 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 >

DEMO

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/, поскольку она включает в себя расширение всех и сворачивание всех, а также использование фильтруемого виджета для открытия сопоставления складывается при вводе в поле поиска.

  • 0
    .collapsible("collapse / expand") короче;)
  • 1
    @ Омар, для тебя мой друг;) - jsfiddle.net/ezanker/MP6DY/3 . $ ('# theSet [data-role = "collapsible"]'). collapsible (this.id == "btnCollapse"? "collapse": "раскрыть");
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню