jQuery UI API - 折叠面板部件（Accordion Widget） · W3School jQuery UI 教程

# jQuery UI API - 折叠面板部件（Accordion Widget） ## 所属类别 [小部件（Widgets）](ref-widgets.html) ## 用法 **描述：**把一对标题和内容面板转换成折叠面板。 **版本新增：**1.0 折叠面板容器的标记需要一对标题和内容面板。 ``` <div id="accordion"> <h3>First header</h3> <div>First content panel</div> <h3>Second header</h3> <div>Second content panel</div> </div> ``` 折叠面板支持任意标记，但是每个内容面板必须是与其相关的头部面板的下一个同级。请查看 [`header`](#option-header) 选项了解如何使用自定义的标记结构。面板可以通过设置 [`active`](#option-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 框架](api-css-framework.html) 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称： * `ui-accordion`：折叠面板的外层容器。 * `ui-accordion-header`：折叠面板的标题。如果标题包含 [`icons`](#option-icons)，则标题会另外有个 `ui-accordion-icons` class。 * `ui-accordion-content`：折叠面板的内容面板。 ### 依赖 * [UI 核心（UI Core）](ref-ui-core.html) * [部件库（Widget Factory）](api-jQuery-widget.html) * [特效核心（Effects Core）](ref-effects-core.html)（可选的；当与 [`animate`](#option-animate) 选项一起使用时） ### 附加说明 * 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。 ### 快速导航 | 选项 | 方法 | 事件 | | --- | --- | --- | | [active](#option-active)[animate](#option-animate)[collapsible](#option-collapsible)[disabled](#option-disabled)[event](#option-event)[header](#option-header)[heightStyle](#option-heightStyle)[icons](#option-icons) | [destroy](#method-destroy)[disable](#method-disable)[enable](#method-enable)[option](#method-option)[refresh](#method-refresh)[widget](#method-widget) | [activate](#event-activate)[beforeActivate](#event-beforeActivate)[create](#event-create) | #### active **类型**：Boolean 或 Integer **描述**：当前打开哪一个面板。 **支持多个类型：** * **Boolean**：设置 `active` 为 `false` 将折叠所有的面板。这要求 [`collapsible`](#option-collapsible) 选项必须为 `true`。 * **Integer**：激活打开的面板索引，以零为基础。负值则表示从最后一个面板后退选择面板。 **代码实例：** 初始化带有指定 `active` 选项的 accordion： ``` $( ".selector" ).accordion({ active: 2 }); ``` 在初始化后，获取或设置 `active` 选项： ``` // getter var active = $( ".selector" ).accordion( "option", "active" ); // setter $( ".selector" ).accordion( "option", "active", 2 ); ``` **默认值**：0 #### animate **类型**：Boolean 或 Number 或 String 或 Object **描述**：是否使用动画改变面板，且如何使用动画改变面板。 **支持多个类型：** * **Boolean**：`false` 值将禁用动画。 * **Number**：easing 默认的持续时间，以毫秒计。 * **String**：默认的持续时间要使用的 [easing](api-easings.html) 名称。 * **Object**：`easing` 和 `duration` 属性的动画设置。 * 上面任意的选项都可以包含 `down` 属性。 * 当被激活的面板有一个比当前激活面板较低的指数时，发生 "Down" 动画。 **代码实例：** 初始化带有指定 `animate` 选项的 accordion： ``` $( ".selector" ).accordion({ animate: "bounceslide" }); ``` 在初始化后，获取或设置 `animate` 选项： ``` // getter var animate = $( ".selector" ).accordion( "option", "animate" ); // setter $( ".selector" ).accordion( "option", "animate", "bounceslide" ); ``` **默认值**：{} #### collapsible **类型**：Boolean **描述**：所有部分是否都可以马上关闭。允许折叠激活的部分。 **代码实例：** 初始化带有指定 `collapsible` 选项的 accordion： ``` $( ".selector" ).accordion({ collapsible: true }); ``` 在初始化后，获取或设置 `collapsible` 选项： ``` // getter var collapsible = $( ".selector" ).accordion( "option", "collapsible" ); // setter $( ".selector" ).accordion( "option", "collapsible", true ); ``` **默认值**：false #### disabled **类型**：Boolean **描述**：如果设置为 `true`，则禁用该 accordion。 **代码实例：** 初始化带有指定 `disabled` 选项的 accordion： ``` $( ".selector" ).accordion({ disabled: true }); ``` 在初始化后，获取或设置 `disabled` 选项： ``` // getter var disabled = $( ".selector" ).accordion( "option", "disabled" ); // setter $( ".selector" ).accordion( "option", "disabled", true ); ``` **默认值**：false #### event **类型**：String **描述**：accordion 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格间隔。 **代码实例：** 初始化带有指定 `event` 选项的 accordion： ``` $( ".selector" ).accordion({ event: "mouseover" }); ``` 在初始化后，获取或设置 `event` 选项： ``` // getter var event = $( ".selector" ).accordion( "option", "event" ); // setter $( ".selector" ).accordion( "option", "event", "mouseover" ); ``` **默认值**："click" #### header **类型**：Selector **描述**：标题元素的选择器，通过主要 accordion 元素上的 .find() 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。 **代码实例：** 初始化带有指定 `header` 选项的 accordion： ``` $( ".selector" ).accordion({ header: "h3" }); ``` 在初始化后，获取或设置 `header` 选项： ``` // getter var header = $( ".selector" ).accordion( "option", "header" ); // setter $( ".selector" ).accordion( "option", "header", "h3" ); ``` **默认值**："> li > :first-child,> :not(li):even" #### heightStyle **类型**：String **描述**：控制 accordion 和每个面板的高度。可能的值： * `"auto"`：所有的面板将会被设置为最高的面板的高度。 * `"fill"`：基于 accordion 的父元素的高度，扩展到可用的高度。 * `"content"`：每个面板的高度取决于它的内容。 **代码实例：** 初始化带有指定 `heightStyle` 选项的 accordion： ``` $( ".selector" ).accordion({ heightStyle: "fill" }); ``` 在初始化后，获取或设置 `heightStyle` 选项： ``` // getter var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" ); // setter $( ".selector" ).accordion( "option", "heightStyle", "fill" ); ``` **默认值**："auto" #### icons **类型**：Object **描述**：标题要使用的图标，与 [jQuery UI CSS 框架提供的图标（Icons）](api-icons.html) 匹配。设置为 `false` 则不显示图标。 * header （string，默认值："ui-icon-triangle-1-e"） * activeHeader （string，默认值："ui-icon-triangle-1-s"） **代码实例：** 初始化带有指定 `icons` 选项的 accordion： ``` $( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }); ``` 在初始化后，获取或设置 `icons` 选项： ``` // getter var icons = $( ".selector" ).accordion( "option", "icons" ); // setter $( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } ); ``` **默认值**：{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" } #### 方法 #### destroy() **类型**：jQuery (plugin only) **描述**：完全移除 accordion 功能。这会把元素返回到它的预初始化状态。 * 该方法不接受任何参数。 **代码实例：** 调用 destroy 方法： ``` $( ".selector" ).accordion( "destroy" ); ``` #### disable() **类型**：jQuery (plugin only) **描述**：禁用 accordion。 * 该方法不接受任何参数。 **代码实例：** 调用 disable 方法： ``` $( ".selector" ).accordion( "disable" ); ``` #### enable() **类型**：jQuery (plugin only) **描述**：启用 accordion。 * 该方法不接受任何参数。 **代码实例：** 调用 enable 方法： ``` $( ".selector" ).accordion( "enable" ); ``` #### option( optionName ) **类型**：Object **描述**：获取当前与指定的 `optionName` 关联的值。 * **optionName** 类型：String 描述：要获取的选项的名称。 **代码实例：** 调用该方法： ``` var isDisabled = $( ".selector" ).accordion( "option", "disabled" ); ``` #### option() **类型**：PlainObject **描述**：获取一个包含键/值对的对象，键/值对表示当前 accordion 选项哈希。 * 该方法不接受任何参数。 **代码实例：** 调用该方法： ``` var options = $( ".selector" ).accordion( "option" ); ``` #### option( optionName, value ) **类型**：jQuery (plugin only) **描述**：设置与指定的 `optionName` 关联的 accordion 选项的值。 * **optionName** 类型：String 描述：要设置的选项的名称。 * **value** 类型：Object 描述：要为选项设置的值。 **代码实例：** 调用该方法： ``` $( ".selector" ).accordion( "option", "disabled", true ); ``` #### option( options ) **类型**：jQuery (plugin only) **描述**：为 accordion 设置一个或多个选项。 * **options** 类型：Object 描述：要设置的 option-value 对。 **代码实例：** 调用该方法： ``` $( ".selector" ).accordion( "option", { disabled: true } ); ``` #### refresh() **类型**：jQuery (plugin only) **描述**：处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 accordion 的高度。结果取决于内容和 `[heightStyle](#option-heightStyle ) `选项。 * 该方法不接受任何参数。 **代码实例：** 调用 refresh 方法： ``` $( ".selector" ).accordion( "refresh" ); ``` #### widget() **类型**：jQuery **描述**：返回一个包含 accordion 的 `jQuery` 对象。 * 该方法不接受任何参数。 **代码实例：** 调用 widget 方法： ``` var widget = $( ".selector" ).accordion( "widget" ); ``` #### 事件 #### activate( event, ui ) **类型**：accordionactivate **描述**：面板被激活后触发（在动画完成之后）。如果 accordion 之前是折叠的，则 `ui.oldHeader` 和 `ui.oldPanel` 将是空的 jQuery 对象。如果 accordion 正在折叠，则 `ui.newHeader` 和 `ui.newPanel` 将是空的 jQuery 对象。 **注意：由于 `activate` 事件只有在面板激活时才能触发，当创建 accordion 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 `create` 事件。** * **event** 类型：Event * **ui** 类型：Object * **newHeader** 类型：jQuery 描述：刚被激活的标题。 * **oldHeader** 类型：jQuery 描述：刚被取消激活的标题。 * **newPanel** 类型：jQuery 描述：刚被激活的面板。 * **oldPanel** 类型：jQuery 描述：刚被取消激活的面板。 **代码实例：** 初始化带有指定 activate 回调的 accordion： ``` $( ".selector" ).accordion({ activate: function( event, ui ) {} }); ``` 绑定一个事件监听器到 accordionactivate 事件： ``` $( ".selector" ).on( "accordionactivate", function( event, ui ) {} ); ``` #### beforeActivate( event, ui ) **类型**：accordionbeforeactivate **描述**：面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的，则 `ui.oldHeader` 和 `ui.oldPanel` 将是空的 jQuery 对象。如果 accordion 正在折叠，则 `ui.newHeader` 和 `ui.newPanel` 将是空的 jQuery 对象。 * **event** 类型：Event * **ui** 类型：Object * **newHeader** 类型：jQuery 描述：将被激活的标题。 * **oldHeader** 类型：jQuery 描述：将被取消激活的标题。 * **newPanel** 类型：jQuery 描述：将被激活的面板。 * **oldPanel** 类型：jQuery 描述：将被取消激活的面板。 **代码实例：** 初始化带有指定 beforeActivate 回调的 accordion： ``` $( ".selector" ).accordion({ beforeActivate: function( event, ui ) {} }); ``` 绑定一个事件监听器到 accordionbeforeactivate 事件： ``` $( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} ); ``` #### create( event, ui ) **类型**：accordioncreate **描述**：当创建 accordion 时触发。如果 accordion 是折叠的，`ui.header` 和 `ui.panel` 将是空的 jQuery 对象。 * **event** 类型：Event * **ui** 类型：Object * **header** 类型：jQuery 描述：激活的标题。 * **panel** 类型：jQuery 描述：激活的面板。 **代码实例：** 初始化带有指定 create 回调的 accordion： ``` $( ".selector" ).accordion({ create: function( event, ui ) {} }); ``` 绑定一个事件监听器到 accordioncreate 事件： ``` $( ".selector" ).on( "accordioncreate", function( event, ui ) {} ); ``` ## 实例一个简单的 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> ```