jQuery Mobile 可折叠小部件折叠选项

简介

jQuery Mobile 的可折叠小部件可以通过折叠列表项（collapsible list item）的方式在移动设备上实现简单的折叠效果。通过将折叠选项（collapsible）属性添加到列表项元素（list item element），可以使其成为可折叠项（collapsible item），并且在单击可折叠项的标头时自动展开或收起。

用法

基本用法

要将列表项转换为可折叠项，只需在列表项元素上添加 data-role="collapsible" 属性。可折叠标头和面板可以在列表项元素中包含嵌套的标题（heading）和其他内容。

<div data-role="collapsible">
  <h3>可折叠标头</h3>
  <p>可折叠面板</p>
</div>

手风琴效果

通过将 data-role 属性设置为 "collapsibleset"，您可以将多个可折叠项嵌套在一起，以实现手风琴效果（即一次只能打开一个可折叠项）。要使用此功能，请确保每个可折叠项的 ID 都是唯一的。

<div data-role="collapsibleset">
  <div data-role="collapsible" id="section1">
    <h3>第一部分</h3>
    <p>第一部分的内容</p>
  </div>
  <div data-role="collapsible" id="section2">
    <h3>第二部分</h3>
    <p>第二部分的内容</p>
  </div>
  <div data-role="collapsible" id="section3">
    <h3>第三部分</h3>
    <p>第三部分的内容</p>
  </div>
</div>

主题

需要注意的是，可折叠项的标题和面板背景颜色取决于 jQuery Mobile 主题的设置。您可以使用 data-theme 属性将可折叠项的主题与其他部分分开。

<div data-role="collapsible" data-theme="a">
  <h3>可折叠标头</h3>
  <p>可折叠面板</p>
</div>

结束语

通过使用 jQuery Mobile 的可折叠小部件，您可以方便地为移动设备创建简单的折叠效果。了解如何使用正确的主题和嵌套结构，以便提供良好的用户体验。