网页内容太多时，直接全部展示会让用户感到 overwhelmed（信息过载）。jQuery-Collapse正是一个解决这个问题的轻量级 jQuery 折叠插件：它仅约1kb（压缩后 ~1.2kb），就能让你的页面内容实现「渐进式披露」（progressive disclosure）——先展示标题，点击后再展开详情。无论你是新手还是老手，3 分钟即可读懂它的核心玩法。

为什么选择 jQuery-Collapse？✨

核心实现非常小巧，整个插件只有 173 行代码，入口文件见 src/jquery.collapse.js。

快速上手：3 步开启内容折叠 🚀

第 1 步：引入两个脚本（jQuery + 插件本体）：

<script src="jquery.min.js"></script> <script src="jquery.collapse.js"></script>

第 2 步：给容器加上data-collapse属性。插件会自动把容器内的元素按「成对」处理——奇数项当标题，偶数项当可折叠内容：

<div><h2 class="open">我默认是展开的</h2>

就这么简单——data-collapse属性会自动触发脚本，无需任何手动初始化。

两大进阶玩法：手风琴 + 状态持久化 🎯

手风琴模式（Accordion）

在属性值中写入accordion，即可实现「展开一个、收起其他」的经典手风琴交互：

<div><script src="jquery.collapse.js"></script> <script src="jquery.collapse_storage.js"></script>

插件会优先使用 HTML5localStorage，不可用时自动降级到 Cookie，再不行就优雅退化为普通折叠（功能不受影响，只是不记忆状态）。持久化核心读写逻辑位于 src/jquery.collapse_storage.js；针对 IE6-7 的 Cookie 降级方案在 src/jquery.collapse_cookie_storage.js。

💡 两种模式可以叠加：data-collapse="accordion persist"。

常用配置选项与事件速查 ⚙️

不满足于 HTML 属性写法？可以用 jQuery 方式初始化并传参（见 src/jquery.collapse.js）：

事件方面：

• 监听状态变化：bind("opened")/bind("closed")；
• 主动控制：对容器触发open（全部展开）、close（全部收起）、toggle（切换）事件即可。

例如「一键展开全部」只需一行：$("#demo").trigger("open")。

项目结构与延伸阅读 📁

想本地跑起来？克隆仓库后执行npm install && npm test，Karma 会自动打开 Chrome 和 Firefox 运行测试。

git clone https://gitcode.com/gh_mirrors/jq/jQuery-Collapse

总结

jQuery-Collapse 用不到 1kb 的体积、173 行源码，提供了折叠、手风琴、持久化、自定义动画、无障碍支持等一整套内容渐进式披露能力。对于 FAQ 页面、产品参数页、长文章目录等场景，它是一个「小而美」的终极选择。打开 demo/demo.html 亲手点一点，感受它顺滑的交互吧！