课程表

jQuery Mobile 教程

jQuery Mobile 列表

jQuery Mobile 表单

jQuery Mobile 主题

jQuery Mobile 事件

jQuery Mobile 实例

jQuery Mobile 参考手册

工具箱
速查手册

jQuery Mobile 可折叠

当前位置:免费教程 » 移动开发 » jQuery Mobile

可折叠的内容块

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

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

实例

  1. <div data-role="collapsible">
  2. <h1>点击我 - 我可以折叠!</h1>
  3. <p>我是可折叠的内容。</p>
  4. </div>

亲自试一试

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

实例

  1. <div data-role="collapsible" data-collapsed="false">
  2. <h1>点击我 - 我可以折叠!</h1>
  3. <p>现在我默认是展开的。</p>
  4. </div>

亲自试一试

嵌套的可折叠块

可以嵌套可折叠内容块:

实例

  1. <div data-role="collapsible">
  2. <h1>点击我 - 我可以折叠!</h1>
  3. <p>我是被展开的内容。</p>
  4. <div data-role="collapsible">
  5. <h1>点击我 - 我是嵌套的可折叠块!</h1>
  6. <p>我是嵌套的可折叠块中被展开的内容。</p>
  7. </div>
  8. </div>

亲自试一试

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

可折叠集合

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

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

实例

  1. <div data-role="collapsible-set">
  2. <div data-role="collapsible">
  3. <h1>点击我 - 我可以折叠!</h1>
  4. <p>我是被展开的内容。</p>
  5. </div>
  6. <div data-role="collapsible">
  7. <h1>点击我 - 我可以折叠!</h1>
  8. <p>我是被展开的内容。</p>
  9. </div>
  10. </div>

亲自试一试

更多实例

通过 data-inset 属性来删除圆角
如何移除 collapsibles 上的圆角。
通过 data-mini 最小化 collapsibles
如何使 collapsibles 更小巧。
通过 data-collapsed-icon 和 data-expanded-icon 改变图标
如何改变 collapsibles 的图标(默认是 + 和 -)。
转载本站内容时,请务必注明来自W3xue,违者必究。
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号