jQuery Collapse 技术文档

1. 安装指南

jQuery Collapse 是一个轻量级的 jQuery 插件，用于折叠内容，也被称为“逐步披露”功能。在开始使用之前，请确保您的项目中已包含 jQuery，且版本至少为 1.7.0。

通过 CDN 安装 jQuery 和 jQuery Collapse 插件

在您的文档中加载 jQuery 和 jQuery Collapse 插件：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>

2. 项目使用说明

在 HTML 中使用 data-collapse 属性来自动触发插件：

<div data-collapse>
  <h2>标题</h2>
  <div>内容...</div>
  <h2>另一个标题</h2>
  <div>另一内容...</div>
</div>

默认情况下，页面加载时所有部分都会折叠。如果您希望在页面加载时显示某个部分，可以为该部分的标题添加 open 类。

<div data-collapse>
  <h2 class="open">默认展开的部分</h2>
  <p>这里是内容</p>
</div>

3. 项目 API 使用文档

以下是初始化插件时可以使用的一些选项和事件。

选项

在用 JavaScript 初始化插件时，可以传递以下选项：

• open (function)：打开部分的自定义函数
• close (function)：折叠部分的自定义函数
• accordion (bool)：设置为 true 以启用手风琴行为
• persist (bool)：设置为 true 以在页面加载之间启用持久性
• query (string)：自定义标记时使用
• clickQuery (string)：自定义点击查询

事件

可以监听 opened 和 closed 事件来了解折叠集合的状态变化。

$("#demo").bind("opened", function(e, section) {
  console.log(section, " 已被打开");
});

$("#demo").bind("closed", function(e, section) {
  console.log(section, " 已被折叠");
});

API 方法

如果使用原生 JavaScript 实例化插件，将直接访问 open、close 和 toggle 方法。

var demo = new jQueryCollapse($("#demo")); // 初始化插件
demo.open(); // 打开所有部分
demo.close(); // 折叠所有部分
demo.open(0); // 打开第一个部分
demo.close(0); // 折叠第一个部分
demo.toggle(1); // 切换第二个部分

4. 项目安装方式

要为您的项目安装 jQuery Collapse，可以通过以下方式：

• 通过 CDN 链接直接在 HTML 中引入。
• 克隆项目仓库并按照需要集成到您的项目中。

请确保遵循上述安装指南，并在您的 HTML 文档中正确引用 jQuery 和 jQuery Collapse 脚本。