折疊/動態折疊

Question

我創建了一些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 >

單擊按鈕時如何一次打開所有可折疊元素？

Answer 1

可折疊集窗口小部件在設計上一次只允許一個可折疊的打開。 如果您希望可折疊集的外觀沒有任何行為，請刪除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

更新：單擊按鈕即可展開所有內容。 給定“全部展開”和“全部折疊”按鈕，如下所示：

<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);創建一個處理程序.collapsible("option", "collapsed", true or false); 使用選擇器返回集合中的所有可折疊對象：

$(document).on("click", ".collapseExpand", function(){
    var collapseAll = this.id == "btnCollapse";
    $('#theSet [data-role="collapsible"]').collapsible("option", "collapsed", collapseAll);
});

更新了演示

您可能會發現這篇文章很有趣： http : //jqmtricks.wordpress.com/2014/04/25/filterable-opens-matching-collapsibles/ ，其中包括全部展開和全部折疊以及使用filterable小部件打開匹配項在搜索框中鍵入內容時，可折疊的內容。