本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第7章，第7.1节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
代码清单7-1介绍了折叠菜单（accordin）微件，通过它，可以将内容分组在标题下面，并且每次只显示选定的一组内容。单击另一个标题会关闭当前打开的一组内容然后在选定的标题下展开新的分组。
代码清单7-1 把< h3>和< div>元素转换成折叠菜单
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Accordion</title> 05 <link type="text/css" rel="stylesheet" href= 06 "http://code.jquery.com/ui/1.8.16/themes/base/jquery-ui.css"> 07 <style> 08 div#my-accordion { 09 font-size: 14px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <div id="my-accordion"> 16 <h3> 17 <a href="#first">Try to switch to the next part</a> 18 </h3> 19 <div> 20 The content 21 </div> 22 <h3> 23 <a href="#second">Next</a> 24 </h3> 25 <div> 26 More content 27 </div> 28 <h3> 29 <a href="#third">Last</a> 30 </h3> 31 <div> 32 and the last content 33 </div> 34 </div> 35 36 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 37 <script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"> 38 </script> 39 40 <script> 41 // 请将下列代码移至一个外部的.js文件中 42 $(document).ready(function() { 43 44 $('#my-accordion').accordion(); 45 46 }); 47 </script> 48 </body> 49 </html>第15～34行显示了一个有特定HTML结构的div。你应该发现其中的模式，也就是一个h3元素包含一个锚（anchor）元素，其后接div元素，如此重复。h3元素会用作分组的标题，而为了能对分组进行折叠，div元素需要是能隐藏的。
7.1.1 为折叠菜单元素添加样式本章的简介中已经提到，折叠菜单会生成精心设计的HTML结构。更准确地说，它扩展了现有的HTML结构。在div上应用accordion方法后，HTML看上去如下面的代码段。（注意：下面的HTML是程序生成的，不需要手动录入。）
<div id="my-accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist"> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> <span class="ui-icon ui-icon-triangle-1-s"></span> <a href="#first">First</a> </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; height: 18px; padding-top: 14px; padding-bottom: 14px; overflow-x: auto; overflow-y: auto; " role="tabpanel">Content for first section</div> <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1" > <span class="ui-icon ui-icon-triangle-1-e"></span> <a href="#second">Second</a> </h3> <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="overflow-x: auto; overflow-y: auto; display: none; height: 18px; padding-top: 14px; padding-bottom: 14px; " role="tabpanel">Content for second section</div>粗体部分表示相对于原来的HTML所做的更改。高亮显示的代码部分是可变的，当用户点击一个不同的折叠菜单的头部时，它们会随之变化。
7.1.2 设置折叠菜单的选项有许多不同的选项可以设置和用于折叠菜单微件。表7-1列出了设置选项的例子，后面是每个选项功能的描述。
7.1.3 捕获折叠菜单的事件下面是一个示例，用来演示可能从ui参数得到的值：
ui = { newContent: // 元素 newHeader: // 元素 oldContent: // 元素 oldHeader: // 元素 options: Object active: 3 animated: "slide" autoHeight: true change: function (event, ui) { clearStyle: false collapsible: false disabled: false duration: undefined event: "click" fillSpace: false header: "> li > :first-child,> :not(li):even" icons: Object navigation: true navigationFilter: function (index) { proxied: "slide" proxiedDuration: undefined }下面演示了当一个新的折叠菜单组件实例化后，处理该事件的位置：
$('#my-accordion').accordion({create: function(event, ui) { // 事件处理 }}); //或 $('#my-accordion') .on('accordioncreate', function(event, ui) { // 事件处理 }) .accordion(); 下面演示了选择了折叠菜单中的一个新分组，并且在组件切换动画完成后处理切换事件的位置： $('#my-accordion').accordion({change: function(event, ui) { // 事件处理 }}); //或 $('#my-accordion').accordion() .on('accordionchange', function(event, ui) { // 事件处理 });下面演示了选择了折叠菜单中的一个新组，并且在动画刚开始时处理该事件的位置：
$('#my-accordion').accordion({changestart: function(event, ui) { // 事件处理 }}); //或 $('#my-accordion').accordion() .on('accordionchangestart', function(event, ui) { // 事件处理 });7.1.4 调用折叠菜单的方法折叠菜单微件还包括了一些用于改变值和行为的方法。表7-2列出了这些可用的方法。
相关资源：敏捷开发V1.0.pptx