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>
嵌套的可折叠块
可以嵌套可折叠内容块:
实例
<divdata-role="collapsible"
> <h1>点击我 - 我可以折叠!</h1> <p>我是被展开的内容。</p> <divdata-role="collapsible"
> <h1>点击我 - 我是嵌套的可折叠块!</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </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>
更多实例
- 通过 data-inset 属性来删除圆角
- 如何移除 collapsibles 上的圆角。
- 通过 data-mini 最小化 collapsibles
- 如何使 collapsibles 更小巧。
- 通过 data-collapsed-icon 和 data-expanded-icon 改变图标
- 如何改变 collapsibles 的图标(默认是 + 和 -)。