在 jQuery Mobile 中，可折叠块（Collapsible）是一种 UI 组件，用于创建可以展开和折叠的区域。它通常用于实现折叠的菜单、内容区域等。以下是一些基本的 jQuery Mobile 可折叠块的示例：

1. 简单的可折叠块
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile Collapsible</title>
    <!-- 引入 jQuery 核心库 -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <!-- 引入 jQuery Mobile 样式表 -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- 引入 jQuery Mobile 脚本文件 -->
    <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>Collapsible Example</h1>
    </div>
    <div data-role="content">
        <div data-role="collapsible">
            <h3>Section 1</h3>
            <p>This is the content of Section 1.</p>
        </div>
        <div data-role="collapsible">
            <h3>Section 2</h3>
            <p>This is the content of Section 2.</p>
        </div>
    </div>
</div>

</body>
</html>

在这个例子中，我们使用 data-role="collapsible" 定义了两个可折叠块。每个块都包含一个标题（<h3> 元素）和内容（<p> 元素）。通过点击标题，用户可以展开或折叠块。

2. 设置默认展开的可折叠块

你可以通过在 data-role="collapsible" 元素上添加 data-collapsed="false" 属性来设置默认展开的可折叠块：
<div data-role="collapsible" data-collapsed="false">
    <h3>Section 3 (Expanded by default)</h3>
    <p>This is the content of Section 3.</p>
</div>

3. 可折叠块组

可折叠块也可以组合成一个集合，使得在组内只有一个可见的块。通过添加 data-role="collapsibleset" 定义组：
<div data-role="collapsibleset">
    <div data-role="collapsible">
        <h3>Group 1, Section 1</h3>
        <p>This is the content of Group 1, Section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Group 1, Section 2</h3>
        <p>This is the content of Group 1, Section 2.</p>
    </div>
</div>

<div data-role="collapsibleset">
    <div data-role="collapsible">
        <h3>Group 2, Section 1</h3>
        <p>This is the content of Group 2, Section 1.</p>
    </div>
    <div data-role="collapsible">
        <h3>Group 2, Section 2</h3>
        <p>This is the content of Group 2, Section 2.</p>
    </div>
</div>

在这个例子中，我们创建了两个可折叠块组，每个组内有两个可折叠块。点击组内的任何一个可折叠块，会折叠其他组内的块。

这只是 jQuery Mobile 可折叠块的基本用法示例。你可以根据实际需求设置默认展开、组合可折叠块等。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/collapsible/)中找到。


转载请注明出处：http://www.pingtaimeng.com/article/detail/9423/jQuery Mobile