jQuery Collapse轻量级的手风琴菜单插件

jQuery Collapse 是一个轻量级的 jQuery 插件用以对元素进行展开和收起的功能，支持 Cookie 进行状态保存，也就是我们经常说到的手风琴菜单效果。该插件采用方便和轻便的解决方案收缩菜单。

特点

持久性

jQuery Collapse 在页面加载使用HTML5 localStorage或Cookie保存数据，所以下次打开页面任然可以看到上次保存的结果。而不许额外的代码部署。

手风琴

jQuery的崩溃是挤满了经典的“手风琴”的行为，可以很容易地打开和关闭。

WAI-ARIA规范

插件被设计在心灵WAI-ARIA定义了一种方法，使Web内容和Web应用程序更方便残疾人士使用。

轻量级

jQuery崩溃的设计是轻量级的最小的膨胀。这只是~ 1KB时，编译和gzip压缩！

跨浏览器兼容

在IE6+、Firefox3 +、chrome5 +、safari4 +全面测试，Opera 10 +。在不受支持的浏览器中优雅地降级。

使用方法

在网页中加载jQuery文件和 jQuery Collapse 插件文件

编写类似如下结构的HTML代码

使用jQuery Collapse就是这么简单，其中 data-collapse 属性用于脚本控制菜单的缩放。

默认的打开/收缩菜单

标准的行为是在页面上加载所有的部分。如果你想向用户显示页面加载的部分，你可以通过添加一个“open”的Class类来实现这个效果，例如下面的代码。

展开所有的元素

你可以通过脚本事件展开和关闭所有的元素，例如我们有以下的HTML代码。

现在你可以使用trigger方法来实现你自己想要的效果，例如下面的JavaScript代码

$("#test").trigger("open") // Open all sections
$("#test").trigger("close") // Close all sections
$("#test h2 a").first().trigger("open") // Open first section
更多函数方法的使用，请参见下面的方法函数部分。

JavaScript 使用方法

如果你不喜欢在HTML中使用data-collapse属性来定制，那么你也可以通过脚本的方式来实现。

$("#demo").collapse({
  // options...
});
如果你不喜欢使用 jQuery ($) 方法，那么你也可以使用下面的方法来实例化

new jQueryCollapse($("#demo"), {
  // options...
});
使用自定义HTML结构

默认情况下，该插件将寻找一组元素。在实际的生产环境中HTML标记可能会有所不同，你就需要自定义插件的解释。例如：

为了了解上面的标记，我们可以通过一个“查询”选项来指定一个部分的头/概要元素：

new jQueryCollapse($("#demo"), {
  query: 'div h2'
});
外部标记示例

您还可以使用任意一个链接在一个页面上折叠扩大一个部分：

Toggle section

然后将事件处理程序附加到您的链接和使用jQuery崩溃的事件来切换部分：

$("#toggle").click(function() {
  $(this.hash).trigger("toggle");
});
自定义点击事件

有时候你想自定义崩溃的总结里面的元素，应该触发打开/关闭的动作。考虑下面的标记：

现在使用的clickquery选项触发动作只有当跨度点击

$("#custom-click-query").collapse({
  clickQuery: "span.toggle"
});

手风琴

将上面实例中的data-collapse值设置为accordion 即可实现手风琴效果

持久性

默认情况下，如果用户重新加载页面的所有内容将被关闭。如果你想让以前折叠的部分保持开放，你可以添加“persist”到data-collapse属性：

并且在其他脚本之后包括您的文档中的存储模块。

在上面的例子里，目标元素（#demo）将需要持久的工作，一个ID，你可以把手风琴和persistence选项结合起来，增加两个值的data-collapse属性：

jQuery Collapse 使用HTML5 LocalStorage保存数据如果可用，否则它将尝试使用Cookies（读关于IE支持下）。如果这也失败了，它会降低工作，但没有任何持久性。

对小于IE7浏览器的支持

IE 6-7你需要包括Cookie存储的支持才能正常工作，JSON2 和 Cookie存储库：