文章目录

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 插件文件

<script src="http://cdn.uedsc.com/jquery/1.8.1/jquery.min.js"></script> <script src="jquery.collapse.js"></script>

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

<div data-collapse> <h2>Fruits</h2> <ul> <li>Apple</li> <li>Pear</li> <li>Orange</li> </ul> <h2>Info</h2> <div> <p>You can use any container you like (in this case a div element)</p> </div> </div>

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

默认的打开/收缩菜单

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

<div data-collapse> <h2>I'm open by default</h2> <p>Yay</p> </div> 展开所有的元素

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

<div data-collapse> <h2>Section 1</h2> <p>I'm first</p> <h2>Section 2</h2> <p>I'm second/p> </div>

现在你可以使用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标记可能会有所不同，你就需要自定义插件的解释。例如：

<div> <div> <h2>Summary</h2> <div>details...</div> </div> <div> <h2>Summary</h2> <div>details...</div> </div> </div>

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

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

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

<a href="#demo">Toggle section</a> <div data-collapse> <div> <h2>Summary</h2> <div>details...</div> </div> </div>

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

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

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

<div> <div> <a href="http://www.google.com">Google.com</a> <span>info</span> </div> <div> <p>Find stuff on google</p> </div> <div> <a href="http://www.twitter.com">Twitter.com</a> <span>info</span> </div> <div> <p>Tweet stuff on twitter</p> </div> </div>

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

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

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

<div data-collapse="accordion"> ... </div> 持久性

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

<div data-collapse="persist"> ... </div>

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

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

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

<div data-collapse="accordion persist"> ... </div>

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

对小于IE7浏览器的支持

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

<!--[if lt IE 8]> <script src="jquery.collapse_cookie_storage.js"></script> <script src="json2.js"></script> <![endif]--> API Documentation

Here are the exposed options and events that you can play around with using JavaScript. Enjoy.

Options

You can pass the following options when initializing the plugin with JavaScript.