📅 最后修改于: 2023-12-03 15:23:54.263000 🧑 作者: Mango
jQuery Mobile 是一个基于 jQuery 的移动应用 UI 框架，它让开发人员可以轻松地创建各种移动应用的 UI，而不需要编写复杂的 CSS 或 JavaScript 代码。其中一个强大的功能是可折叠组件，它使得用户可以点击标题来展开或折叠内容。
本教程将介绍如何使用 jQuery Mobile 创建一个简单的迷你可折叠组件，以便你可以在你的移动应用程序中使用。
我们将创建一个包含两个可折叠小组的页面。每个小组都将包含一个标题和文本。
首先，创建一个 HTML 文件，并将以下代码添加到文件的头部：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Mini Collapsible</title>
<!-- Add the jQuery Mobile CSS -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Add the jQuery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Add the jQuery Mobile library -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Mini Collapsible Demo</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<!-- Add collapsible set -->
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
<!-- Add first collapsible -->
<div data-role="collapsible">
<h3>Collapsible 1</h3>
<p>This is the content for collapsible 1.</p>
</div><!-- /collapsible -->
<!-- Add second collapsible -->
<div data-role="collapsible">
<h3>Collapsible 2</h3>
<p>This is the content for collapsible 2.</p>
</div><!-- /collapsible -->
</div><!-- /collapsibleset -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
代码说明：
<link> 标签用于将 jQuery Mobile CSS 添加到页面。<script> 标签用于将 jQuery 库和 jQuery Mobile 库添加到页面。<div> 标签用于创建一个 jQuery Mobile 页面。<div> 标签包含了一个头部和主要内容部分。<div> 标签使用了 data-role 属性和 data-theme 属性来创建一个可折叠组件。现在你已经可以运行你的代码了，如果一切都设置正确，你应该可以看到一个包含两个可折叠小组的页面。
可折叠组件在移动应用程序中非常有用，它可以使用户更轻松地找到他们所需的信息。例如，你可以在一个 FAQ 页面中使用可折叠小组，以便用户可以展开他们所感兴趣的问题，并查看答案。
本教程介绍了如何使用 jQuery Mobile 创建一个迷你可折叠组件。通过理解这一过程，你可以轻松地在你的移动应用程序中应用可折叠组件，以便更好地组织你的内容。