📅 最后修改于: 2023-12-03 15:32:08.674000 🧑 作者: Mango
jQuery Mobile 是一个流行的 JavaScript 框架，用于快速开发移动 Web 应用程序。其 Collapsibleset 小部件允许用户在 HTML 页面上创建可折叠的分组，这使得页面更加易于浏览和导航。
本文将介绍如何使用 jQuery Mobile Collapsibleset 小部件来插入选项。
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css" />
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<div> 元素，并设置 data-role="collapsibleset" 属性：<div data-role="collapsibleset"></div>
<div> 元素中添加任意数量的 <div> 元素，每个元素代表一个可折叠的分组。设置 data-role="collapsible" 和 data-collapsed="true" 属性，并在其中添加标题和内容：<div data-role="collapsible" data-collapsed="true">
<h3>第一个分组</h3>
<p>这是第一个分组的内容。</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>第二个分组</h3>
<p>这是第二个分组的内容。</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>第三个分组</h3>
<p>这是第三个分组的内容。</p>
</div>
在上述步骤中，首先我们引入了 jQuery 和 jQuery Mobile 库，以便使用 Collapsibleset 小部件。
然后，我们创建了一个 <div> 元素，并将 data-role="collapsibleset" 属性设置为了正常显示我们的内容。
接下来，我们添加了三个 <div> 元素，每个元素代表一个可折叠的分组。每个元素中都包含一个标题和内容。其中，data-role="collapsible" 属性将元素设置为可折叠，而 data-collapsed="true" 属性将元素默认设置为折叠状态。
最后，我们将 HTML 页面运行，打开即可看到 Collapsibleset 小部件。用户可以单击任意一个分组标题，以展开或折叠其内容。
使用 jQuery Mobile Collapsibleset 小部件，您可以轻松创建可折叠的分组，以帮助用户更加方便地浏览和导航您的移动 Web 应用程序。