把一对标题和内容面板转换成折叠面板。
折叠面板容器的标记需要一对标题和内容面板。
<div id="accordion"> <h3>First header</h3> <div>First content panel</div> <h3>Second header</h3> <div>Second content panel</div> </div>
折叠面板支持任意标记，但是每个内容面板必须是与其相关的头部面板的下一个同级。请查看 header 选项了解如何使用自定义的标记结构。
面板可以通过设置 active 选项以编程的方式激活。
键盘交互
当焦点在标题（header）上时，下面的键盘命令可用：
- UP/LEFT - 移动焦点到上一个标题（header）。如果在第一个标题（header）上，则移动焦点到最后一个标题（header）上。
- DOWN/RIGHT - 移动焦点到下一个标题（header）。如果在最后一个标题（header）上，则移动焦点到第一个标题（header）上。
- HOME - 移动焦点到第一个标题（header）上。
- END - 移动焦点到最后一个标题（header）上。
- SPACE/ENTER - 激活与获得焦点的标题（header）相关的面板（panel）。
当焦点在面板（panel）中时，下面的键盘命令可用：
- CTRL+UP：移动焦点到相关的标题（header）。
主题化
折叠面板部件（Accordion Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称：
ui-accordion：折叠面板的外层容器。ui-accordion-header：折叠面板的标题。如果标题包含icons，则标题会另外有个ui-accordion-iconsclass。ui-accordion-content：折叠面板的内容面板。
依赖
- UI 核心（UI Core）
- 部件库（Widget Factory）
- 特效核心（Effects Core）（可选的；当与
animate选项一起使用时）
附加说明：该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
快速导航
选项
- active：当前打开哪一个面板。
- animate：是否使用动画改变面板，且如何使用动画改变面板。
- collapsible：所有部分是否都可以马上关闭。允许折叠激活的部分。
- disabled：如果设置为
true，则禁用该 accordion。 - event：accordion 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格间隔。
- header：标题元素的选择器，通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。
- heightStyle：控制 accordion 和每个面板的高度。可能的值：
"auto"：所有的面板将会被设置为最高的面板的高度。"fill"：基于 accordion 的父元素的高度，扩展到可用的高度。"content"：每个面板的高度取决于它的内容。- icons：标题要使用的图标，与 jQuery UI CSS 框架提供的图标（Icons） 匹配。设置为
false则不显示图标。 - header （string，默认值："ui-icon-triangle-1-e"）
- activeHeader （string，默认值："ui-icon-triangle-1-s"）
方法
- destroy()：完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
- disable()：禁用 accordion。
- enable()：启用 accordion。
- option()：获取当前与指定的
optionName关联的值。 - refresh()：处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 accordion 的高度。结果取决于内容和
heightStyle选项。 - widget()：返回一个包含 accordion 的
jQuery对象。
事件
- activate( event, ui )：面板被激活后触发（在动画完成之后）。如果 accordion 之前是折叠的，则
ui.oldHeader和ui.oldPanel将是空的 jQuery 对象。如果 accordion 正在折叠，则ui.newHeader和ui.newPanel将是空的 jQuery 对象。 - beforeActivate( event, ui )：面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的，则
ui.oldHeader和ui.oldPanel将是空的 jQuery 对象。如果 accordion 正在折叠，则ui.newHeader和ui.newPanel将是空的 jQuery 对象。 - create( event, ui )：当创建 accordion 时触发。如果 accordion 是折叠的，
ui.header和ui.panel将是空的 jQuery 对象。
事件参数ui:类型：Object
- newHeader:类型：jQuery
描述：刚被激活的标题。 - oldHeader:类型：jQuery
描述：刚被取消激活的标题。 - newPanel:类型：jQuery
描述：刚被激活的面板。 - oldPanel:类型：jQuery
描述：刚被取消激活的面板。
实例
一个简单的 jQuery UI 折叠面板（Accordion）。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>折叠面板部件（Accordion Widget）演示</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="accordion"> <h3>部分 1</h3> <div> <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio.</p> </div> <h3>部分 2</h3> <div> <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit, faucibus interdum tellus libero ac justo.</p> </div> <h3>部分 3</h3> <div> <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.Phasellus pellentesque purus in massa.</p> <ul> <li>List item one</li> <li>List item two</li> <li>List item three</li> </ul> </div> </div> <script> $( "#accordion" ).accordion(); </script> </body> </html>
