📅 最后修改于: 2023-12-03 15:38:03.734000 🧑 作者: Mango
jQuery Mobile 是一个基于 HTML5 的 UI 框架，它使用 jQuery 构建。它提供了许多易于使用的组件和工具，可以快速地创建响应式和移动优化的 Web 应用程序。其中一个受欢迎的组件是可折叠图标。
首先，我们需要在 HTML 文件中引入 jQuery 和 jQuery Mobile 库。可以从官网下载最新版本，也可以使用 CDN 引入：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demo</title>
<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/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
接下来，在 HTML 文件中创建一个可折叠的图标。这个图标将包含一个标题和一个内容区域，当用户点击标题时，内容区域将展开或折叠。
<div data-role="collapsible">
<h1>标题</h1>
<p>内容</p>
</div>
添加 data-role="collapsible" 属性将图标变成可折叠的容器。在容器中，我们添加了一个标题和一个内容段落。当用户点击标题时，内容段落将展开或折叠。
可折叠图标有很多选项可以自定义。例如，您可以更改标题的位置、添加图标、设置默认状态等等。以下是一些常见的选项：
data-collapsed="true"：设置图标默认折叠，只显示标题。data-iconpos="right"：将标题和图标位置交换，将图标放在标题右侧。默认值为 "left"，即标题和图标左对齐。data-theme="a"：设置图标主题。有许多主题可用，例如 a、b、c、d、e 等。您可以在 div 元素上使用这些属性来自定义可折叠的图标。例如，下面的示例将图标默认设置为折叠，将图标放在右侧，设置了主题为 "b"：
<div data-role="collapsible" data-collapsed="true" data-iconpos="right" data-theme="b">
<h1>标题</h1>
<p>内容</p>
</div>
可折叠图标具有许多内置事件。例如，您可以通过 expand 或 collapse 事件监听折叠状态的更改。以下是一个示例：
<div data-role="collapsible" id="myCollapsible" data-collapsed="true">
<h1>标题</h1>
<p>内容</p>
</div>
<script>
$(document).on("pagecreate", function() {
$("#myCollapsible").on("collapsibleexpand", function() {
alert("图标已展开");
});
$("#myCollapsible").on("collapsiblecollapse", function() {
alert("图标已折叠");
});
});
</script>
在这个示例中，当图标展开或折叠时，将分别触发 collapsibleexpand 和 collapsiblecollapse 事件，并显示一个警报框。
以上，我们介绍了如何使用 jQuery Mobile 制作可折叠图标。您可以使用自定义选项来调整可折叠图标的外观和行为，并使用内置事件处理程序执行适当的操作。