如何使用 jQuery Mobile 创建基础版可折叠组件
概述
jQuery Mobile 提供了简易版 jQuery 的增强版本，因为它为所有类型的屏幕提供了响应式内容和设计。因此，在开始构建可折叠组件之前，我们应该了解该功能。可折叠组件是一个 Web 组件，它静态显示数据的标题或主要内容，点击标题时，它会展开并显示有关标题的完整信息。我们也可以使用普通的 jQuery 来构建可折叠组件，但它无法提供响应式设计和布局。
jQuery 移动内容分发网络 (CDN) 链接
在开始构建网页布局之前，您应该将以下链接添加到 HTML 文档中。
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css"> <script src="//code.jquery.com/jquery-3.2.1.min.js"> <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
算法
步骤 1 − 在文本编辑器中创建一个包含 HTML 样板文件的 HTML 文件。
步骤 2 − 现在将上面给出的 CDN 链接链接到 HTML 文档的 head 标签，并将 script 标签添加到 body 标签的末尾。
步骤 3 − 现在创建一个具有 role 属性的父 div 容器，并将其值设置为"main"。
<div class="ui-content" role="main"></div>
步骤 4 − 现在创建另一个子 div 容器作为可折叠容器，并为其添加属性 data-role，值为"collapsible"。
<div data-role="collapsible"></div>
步骤 5 − 现在为可折叠 div 容器创建一个标题标签，并向其中添加文本。
<h5>Collaspsibles Text 1</h5>
第 6 步− 现在创建一个 p 标签，并在 p 标签内添加与标题相关的信息。
<p> Repellendus eos cumque commodi praesentium! quas maxime eligendi archito recusandae perferendis， esse Facere? Libero tempore quidem archito，magni excepturibeatae veniam quos tempora，deleniti quod doloremque nisi possimus eius? Optio，dolor ad enim tempora quis voluptatem inventorye? </p>
步骤 7−如果要添加更多可折叠元素，请重复步骤 4、5 和 6。
步骤 8−可折叠元素已成功创建。
示例
在此示例中，我们创建了一个可折叠元素使用 jQuery data-role 属性作为可折叠元素的功能。为了了解可折叠元素，我们使用 jQuery Mobile 创建了两个可折叠元素。
<html>
<head>
<title>Collaspsibles in jQuery mobile</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
</head>
<body>
<div class="ui-content" role="main">
<h3 style="text-align: center; color: green;">tutorialspoint.com</h3>
<div data-role="collapsible">
<h5>Collaspsibles Text 1</h5>
<p> Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,Alias reiciendis quisquam quo voluptate, Alias reiciendis quisquam quo voluptate,repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, essefacere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore? </p>
</div>
<div data-role="collapsible">
<h5>Collaspsibles Text 2</h5>
<p>
repellendus eos cumque commodi praesentium! Quas maxime eligendi. Alias reiciendis quisquam quo voluptate,
repellendus eos cumque commodi praesentium! Quas maxime eligendi architecto recusandae perferendis, esse
facere? Libero tempore quidem architecto, magni excepturi beatae veniam quos tempora, deleniti quod
doloremque nisi possimus eius? Optio, dolor ad enim tempora quis voluptatem inventore?
</p>
</div>
</div>
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</body>
</html>
下图展示了上述示例的输出，我们可以看到，图中显示了两个可折叠元素，标题分别为"可折叠文本 1"和"可折叠文本 2"。因此，当用户点击第一个文本时，它会展开并显示相关标题的内容，第二个标题的内容也一样。
结论
与上述示例一样，我们将 data-role 的值设置为 collapsible，因此特定容器必须包含 h1、h2、h3、h4 或 h5 等标题标签，才能使容器顶部的标题成为可点击的文本。构建此组件时需要注意的重要一点是，需要为需要赋予 collapsible 属性的容器添加 data-role 属性。
