jQuery Mobile可折叠

可折叠的内容块

可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。

如需创建可折叠的内容块，请向某个容器分配 data-role="collapsible" 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记：

实例

<div data-role="collapsible">

          <h1>点击我 - 我可以折叠！</h1>

          <p>我是可折叠的内容。</p>

</div>

默认地，该内容是关闭的。如需在页面加载时扩展内容，请使用 data-collapsed="false"：

实例

<div data-role="collapsible" data-collapsed="false">

          <h1>点击我 - 我可以折叠！</h1>

          <p>现在我默认是展开的。</p>

</div>

嵌套的可折叠块

可以嵌套可折叠内容块：

实例

<div data-role="collapsible">

          <h1>点击我 - 我可以折叠！</h1>

            <p>我是被展开的内容。</p>

            <div data-role="collapsible">

          <h1>点击我 - 我是嵌套的可折叠块！</h1>

<p>我是嵌套的可折叠块中被展开的内容。</p>

  </div>>

提示：可折叠内容块可以被嵌套您希望的任意次数。

可折叠集合

可折叠集合（Collapsible sets）指的是被组合在一起的可折叠块（常被称为手风琴）。当新块被打开时，所有其他块会关闭。

创建若干内容块，然后通过 data-role="collapsible-set" 用新容器包装这个可折叠块：

实例

<div data-role="collapsible-set">

         <div data-role="collapsible">

            <h1>点击我 - 我可以折叠！</h1>

              <p>我是被展开的内容。</p>

         </div>

        <div data-role="collapsible">

           <h1>点击我 - 我可以折叠！</h1>

             <p>我是被展开的内容。</p>

         </div>

</div>