jQuery Mobile 可折叠块（Collapsible）详解
可折叠块（Collapsible） 是 jQuery Mobile 的 手风琴式内容块，点击标题可 展开/收起内容，非常适合 FAQ、设置项、长列表分组 等场景。
支持 单块、手风琴组（Collapsibles Set）、图标自定义、主题。
1. 基本结构（单个）
<div data-role="collapsible">
<h4>点击展开</h4>
<p>这里是隐藏的内容，展开后可见。</p>
</div>关键点：
data-role="collapsible"<h4>是标题（可换h1~h6）- 内容放标题后
2. 默认展开
<div data-role="collapsible" data-collapsed="false">
<h4>默认展开</h4>
<p>我已经展开了！</p>
</div>3. 手风琴组（Collapsibles Set）—— 互斥展开
<div data-role="collapsible-set">
<div data-role="collapsible">
<h4>问题 1</h4>
<p>答案 1：内容...</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h4>问题 2（默认展开）</h4>
<p>答案 2：内容...</p>
</div>
<div data-role="collapsible">
<h4>问题 3</h4>
<p>答案 3：内容...</p>
</div>
</div>
data-role="collapsible-set"→ 只能一个展开
4. 样式与图标
| 属性 | 值 | 说明 |
|---|---|---|
data-theme="a" | a / b | 主题 |
data-content-theme="a" | a / b | 内容区域主题 |
data-collapsed-icon="plus" | plus, minus, arrow-d 等 | 收起时图标 |
data-expanded-icon="minus" | minus, arrow-u 等 | 展开时图标 |
data-iconpos="right" | left / right | 图标位置 |
data-inset="true" | true/false | 圆角内嵌风格 |
<div data-role="collapsible"
data-collapsed-icon="plus"
data-expanded-icon="minus"
data-iconpos="right"
data-inset="true">
<h4>带图标 + 圆角</h4>
<p>内容...</p>
</div>5. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 可折叠块</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<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" data-position="fixed">
<h1>可折叠块演示</h1>
</div>
<div data-role="main" class="ui-content">
<h3>1. 单个可折叠块</h3>
<div data-role="collapsible" data-inset="true">
<h4>点击我展开</h4>
<p>这是一个独立的折叠块，内容可以很长。</p>
<ul data-role="listview">
<li>项目 1</li>
<li>项目 2</li>
<li>项目 3</li>
</ul>
</div>
<h3>2. 手风琴组（互斥）</h3>
<div data-role="collapsible-set" data-theme="a" data-content-theme="a">
<div data-role="collapsible" data-collapsed-icon="plus" data-expanded-icon="minus">
<h4>FAQ 1：jQuery Mobile 是什么？</h4>
<p>一个基于 jQuery 的移动端 UI 框架，已于 2021 年停止维护。</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h4>FAQ 2：当前时间？</h4>
<p><strong>2025年11月17日 03:01（CET）</strong><br>国家：比利时 (BE)</p>
</div>
<div data-role="collapsible">
<h4>FAQ 3：推荐替代品？</h4>
<ul data-role="listview" data-inset="true">
<li>Bootstrap 5</li>
<li>Framework7</li>
<li>Ionic</li>
</ul>
</div>
</div>
<h3>3. 嵌套 + 表单</h3>
<div data-role="collapsible" data-inset="true" data-collapsed="false">
<h4>用户设置</h4>
<form style="padding:10px;">
<label>
<input type="checkbox" data-role="flipswitch"> 开启通知
</label>
<label for="lang">语言：</label>
<select id="lang" data-role="slider">
<option value="en">English</option>
<option value="zh" selected>中文</option>
</select>
<button type="submit" class="ui-btn ui-btn-b">保存</button>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
</body>
</html>6. JavaScript 控制
<script>
$(document).on("pagecreate", function() {
// 展开
$("#myBlock").collapsible("expand");
// 收起
$("#myBlock").collapsible("collapse");
// 切换
$("#myBlock").collapsible("toggle");
// 监听事件
$("#myBlock").on("collapsibleexpand", function() {
console.log("已展开");
});
$("#myBlock").on("collapsiblecollapse", function() {
console.log("已收起");
});
});
</script>7. 最佳实践
| 建议 | 说明 |
|---|---|
手风琴用 collapsible-set | 互斥展开 |
FAQ 用 data-inset="true" | 美观圆角 |
图标用 plus/minus | 直观 |
内容加 padding | 避免贴边 |
| 避免嵌套过多 | 影响性能 |
8. 常见问题
| 问题 | 解决方案 |
|---|---|
| 点击无反应 | 检查 data-role="collapsible" |
| 多个同时展开 | 包裹在 collapsible-set 中 |
| 图标不显示 | CDN 自动加载 |
| 内容太长卡顿 | 避免放大量图片 |
9. 推荐模板
<!-- 单个 -->
<div data-role="collapsible" data-inset="true">
<h4>标题</h4>
<p>内容...</p>
</div>
<!-- 手风琴组 -->
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h4>默认展开</h4>
<p>...</p>
</div>
<div data-role="collapsible">
<h4>收起状态</h4>
<p>...</p>
</div>
</div>总结：属性速查
| 属性 | 常用值 |
|---|---|
data-role | collapsible / collapsible-set |
data-collapsed | false（默认展开） |
data-inset | true（圆角） |
data-collapsed-icon | plus |
data-expanded-icon | minus |
data-iconpos | right |
需要我为你生成：
- FAQ 完整页面（10个问题）？
- 动态添加折叠块（JS）？
- 带搜索的折叠列表？
随时告诉我！
