Question

我创建了一个jQuery Mobile可折叠列表。这是结构：

<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

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

更新：点击按钮展开全部内容。给定全部展开和全部折叠按钮，如下所示：

<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/ 因为它包含展开全部并折叠所有内容以及使用可过滤小部件在您在搜索框中键入时打开匹配的可折叠内容。

动态折叠/展开可折叠

1 个答案: