# Accordion Widget
Categories: [Widgets](http://www.css88.com/jquery-ui-api/category/widgets/ "View all posts in Widgets")
## version added: 1.0
**Description:** 使一对标题和内容面板转换成折叠面板（Accordion）。
## QuickNav[Examples](#entry-examples)
### Options
+ [active](#option-active)
+ [animate](#option-animate)
+ [collapsible](#option-collapsible)
+ [disabled](#option-disabled)
+ [event](#option-event)
+ [header](#option-header)
+ [heightStyle](#option-heightStyle)
+ [icons](#option-icons)
### Methods
+ [destroy](#method-destroy)
+ [disable](#method-disable)
+ [enable](#method-enable)
+ [option](#method-option)
+ [refresh](#method-refresh)
+ [widget](#method-widget)
### Events
+ [activate](#event-activate)
+ [beforeActivate](#event-beforeActivate)
+ [create](#event-create)
你的accordion容器需要按照一个元素成组的满足拥有配对的头部和内容面板的格式要求：
```
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
```
Accordions （折叠面板）支持任意的标记，但每个内容面板必须始终是 其相关联头部之后的下一个兄弟节点。请参阅有关如何使用自定义标记结构的[`header`](#option-header)选项。
面板可以通过设置 [`active`](#option-active)选项来激活。
### 键盘交互(Keyboard interaction)
当焦点在标题（header）上时，下面的键盘命令可用：
* UP/LEFT - 移动焦点到上一个标题（header）。如果在第一个标题（header）上，则移动焦点到最后一个标题（header）上。
* DOWN/RIGHT - 移动焦点到下一个标题（header）。如果在最后一个标题（header）上，则移动焦点到第一个标题（header）上。
* HOME - 移动焦点到第一个标题（header）上。
* END - 移动焦点到最后一个标题（header）上。
* SPACE/ENTER - 激活与获得焦点的标题（header）相关的面板（panel）。
当焦点在面板（panel）中时，下面的键盘命令可用：
* CTRL+UP: 移动焦点到相关的标题（header）。
### 主题(Theming)
折叠面板部件（Accordion Widget）使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称： ui-accordion：折叠面板的外层容器。 ui-accordion-header：折叠面板的标题。如果标题包含 icons，则标题会另外有个 ui-accordion-icons class。 ui-accordion-content：折叠面板的内容面板。
折叠面板部件（Accordion Widget）使用 [jQuery UI CSS framework](/theming/css-framework/) 框架 来定义它的外观和感观的样式。如果需要使用折叠面板指定的样式，则可以使用下面的 CSS class 名称：
* `ui-accordion`: 折叠面板的外层容器。
* `ui-accordion-header`: 折叠面板的标题。如果标题包含 [`icons`](#option-icons)，则标题会另外有个 `ui-accordion-icons` class。
* `ui-accordion-content`: 折叠面板的内容面板。
### 依赖
* [UI 核心（UI Core）](/category/ui-core/)
* [部件库（Widget Factory）](/jQuery.widget/)
* [特效核心（Effects Core）](/category/effects-core/) （可选的；当与 [`animate`](#option-animate)选项一起使用时）
### 其他注意事项:
* 该部件要求一些功能性的 CSS，否则将无法工作。如果您创建了一个自定义的主题，请使用小部件指定的 CSS 文件作为起点。
## 选项
### active**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Integer](http://api.jquery.com/Types/#Integer)
**Default:** `0`当前打开哪一个面板。**支持多个类型：**
* **Boolean**:设置 `active` 为 `false` 将折叠所有的面板。这要求 [`collapsible`](#option-collapsible) 选项必须为 `true`。
* **Integer**: 激活打开的面板索引，以零为基础。负值则表示从最后一个面板后退选择面板。
**Code examples:**
初始化带有指定 `active`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ active: 2 });
```
在初始化后，获取或设置 `active` 选项：
```
// getter
var active = $( ".selector" ).accordion( "option", "active" );
// setter
$( ".selector" ).accordion( "option", "active", 2 );
```
### animate**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Number](http://api.jquery.com/Types/#Number) or [String](http://api.jquery.com/Types/#String) or [Object](http://api.jquery.com/Types/#Object)
**Default:** `{}`是否使用动画改变面板，且如何使用动画改变面板。**支持多个类型：**
* **Boolean**:`false` 值将禁用动画。
* **Number**: 默认 easing 动画的持续时间，以毫秒为单位。
* **String**: 默认的持续时间要使用的 [easing](/easings/) 动画形式 名称。
* **Object**: `easing` 和 `duration` 属性的动画设置。
* 上面任意的选项都可以包含 `down` 属性。
* 当被激活的面板有一个比当前激活面板较低的指数时，发生 "Down" 动画。
**Code examples:**
初始化带有指定 `animate`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ animate: "bounceslide" });
```
在初始化后，获取或设置 `animate` 选项：
```
// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
```
### collapsible**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`所有部分是否都可以马上关闭。允许折叠激活的部分。**Code examples:**
初始化带有指定 `collapsible`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ collapsible: true });
```
在初始化后，获取或设置 `collapsible` 选项：
```
// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
```
### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean)
**Default:** `false`如果设置为 `true`，则禁用该 Accordion（折叠面板）。**Code examples:**
初始化带有指定 `disabled`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ disabled: true });
```
在初始化后，获取或设置 `disabled` 选项：
```
// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
// setter
$( ".selector" ).accordion( "option", "disabled", true );
```
### event**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"click"`Accordion（折叠面板） 头部会作出反应的事件，用以激活相关的面板。可以指定多个事件，用空格隔开。**Code examples:**
初始化带有指定 `event`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ event: "mouseover" });
```
在初始化后，获取或设置 `event` 选项：
```
// getter
var event = $( ".selector" ).accordion( "option", "event" );
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
```
### header**Type:** [Selector](http://api.jquery.com/Types/#Selector)
**Default:** `"> li > :first-child,> :not(li):even"`
标题元素的选择器，通过主要 accordion 元素上的 `.find()` 进行应用。内容面板必须是紧跟在与其相关的标题后的同级元素。
**Code examples:**
初始化带有指定 `header`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ header: "h3" });
```
在初始化后，获取或设置 `header` 选项：
```
// getter
var header = $( ".selector" ).accordion( "option", "header" );
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
```
### heightStyle**Type:** [String](http://api.jquery.com/Types/#String)
**Default:** `"auto"`
控制 Accordion（折叠面板） 和每个面板的高度。可能的值：
* `"auto"`: 所有的面板将会被设置为最高的面板的高度。
* `"fill"`: 基于 accordion 的父元素的高度，扩展到可用的高度。
* `"content"`: 每个面板的高度取决于它的内容。
**Code examples:**
初始化带有指定 `heightStyle`选项的 Accordion（折叠面板）：
```
$( ".selector" ).accordion({ heightStyle: "fill" });
```
在初始化后，获取或设置 `heightStyle` 选项：
```
// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
```
### icons**Type:** [Object](http://api.jquery.com/Types/#Object)
**Default:** `{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }`
标题要使用的图标，与 [jQuery UI CSS 框架提供的图标（Icons）](/theming/icons/) 匹配。设置为 false 则不显示图标。
* header (string, 默认值： "ui-icon-triangle-1-e")
* activeHeader (string, 默认值： "ui-icon-triangle-1-s")
**Code examples:**
初始化带有指定 `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" } );
```
## Methods
### destroy()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
完全移除 accordion 功能。这会把元素返回到它的预初始化状态。
* 该方法不接受任何参数。
**Code examples:**
调用 destroy 方法：
```
$( ".selector" ).accordion( "destroy" );
```
### disable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
禁用 accordion。
* 该方法不接受任何参数。
**Code examples:**
调用 disable 方法：
```
$( ".selector" ).accordion( "disable" );
```
### enable()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
启用 accordion。
* 该方法不接受任何参数。
**Code examples:**
调用 enable 方法：
```
$( ".selector" ).accordion( "enable" );
```
### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object)
获取当前与指定的 `optionName` 关联的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要获取值的选项的名称。
**Code examples:**
调用该方法：
```
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
```
### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject)
获取一个包含键/值对的对象，键/值对表示当前 accordion 选项哈希。
* 该方法不接受任何参数。
**Code examples:**
调用该方法：
```
var options = $( ".selector" ).accordion( "option" );
```
### option( optionName, value )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
设置与指定的 `optionName` 关联的 accordion 选项的值。
* **optionName**Type: [String](http://api.jquery.com/Types/#String)要设置的选项的名称。
* **value**Type: [Object](http://api.jquery.com/Types/#Object)要为选项设置的值。
**Code examples:**
调用该方法：
```
$( ".selector" ).accordion( "option", "disabled", true );
```
### option( options )Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
为 accordion 设置一个或多个选项。
* **options**Type: [Object](http://api.jquery.com/Types/#Object)要设置的 option-value 对。
**Code examples:**
调用该方法：
```
$( ".selector" ).accordion( "option", { disabled: true } );
```
### refresh()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) ([plugin only](http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/))
处理任何在 DOM 中直接添加或移除的标题和面板，并重新计算 accordion 的高度。结果取决于内容和 [`heightStyle`](#option-heightStyle) 选项。
* 该方法不接受任何参数。
**Code examples:**
调用 refresh 方法：
```
$( ".selector" ).accordion( "refresh" );
```
### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery)
返回一个包含 accordion 的 `jQuery` 对象。
* 该方法不接受任何参数。
**Code examples:**
调用 widget 方法：
```
var widget = $( ".selector" ).accordion( "widget" );
```
## Events
### activate( event, ui )Type: `accordionactivate`
面板被激活后触发（在动画完成之后）。如果 accordion 之前是折叠的，则 `ui.oldHeader` 和 `ui.oldPanel` 将是空的 jQuery 对象。如果 accordion 正在折叠，则 `ui.newHeader` 和 `ui.newPanel` 将是空的 jQuery 对象。
**注意：** 由于 `activate` 事件只有在面板激活时才能触发，当创建 accordion 部件时，最初的面板不会触发该事件。如果您需要一个用于部件创建的钩，请使用 [`create`](#event-create) 事件。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **newHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)刚被激活的标题。
* **oldHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)刚被取消激活的标题。
* **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)刚被激活的面板。
* **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)刚被取消激活的面板。
**Code examples:**
初始化带有指定 activate 回调的 accordion：
```
$( ".selector" ).accordion({
activate: function( event, ui ) {}
});
```
绑定一个事件监听器到 accordionactivate 事件:
```
$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
```
### beforeActivate( event, ui )Type: `accordionbeforeactivate`
面板被激活前直接触发。可以取消以防止面板被激活。如果 accordion 当前是折叠的，则 `ui.oldHeader` 和 `ui.oldPanel` 将是空的 jQuery 对象。如果 accordion 正在折叠，则 `ui.newHeader` 和 `ui.newPanel` 将是空的 jQuery 对象。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **newHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)将被激活的标题。
* **oldHeader**Type: [jQuery](http://api.jquery.com/Types/#jQuery)将被取消激活的标题。
* **newPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)将被激活的面板。
* **oldPanel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)将被取消激活的面板。
**Code examples:**
初始化带有指定 beforeActivate 回调的 accordion：
```
$( ".selector" ).accordion({
beforeActivate: function( event, ui ) {}
});
```
绑定一个事件监听器到 accordionbeforeactivate 事件:
```
$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
```
### create( event, ui )Type: `accordioncreate`
当创建 accordion 时触发。如果 accordion 是折叠的，`ui.header` 和 `ui.panel` 将是空的 jQuery 对象。
* **event**Type: [Event](http://api.jquery.com/Types/#Event)
* **ui**Type: [Object](http://api.jquery.com/Types/#Object)
* **header**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的标题。
* **panel**Type: [jQuery](http://api.jquery.com/Types/#jQuery)激活的面板。
**Code examples:**
初始化带有指定 create 回调的 accordion：
```
$( ".selector" ).accordion({
create: function( event, ui ) {}
});
```
绑定一个事件监听器到 accordioncreate 事件:
```
$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );
```
## Example:
#### 一个简单的 jQuery UI 折叠面板（Accordion）。
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>accordion demo</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>Section 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>Section 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>Section 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>
```
- 索引
- Effects
- .addClass()
- Blind Effect
- Bounce Effect
- Clip Effect
- Color Animation
- Drop Effect
- Easings
- .effect()
- Explode Effect
- Fade Effect
- Fold Effect
- .hide()
- Highlight Effect
- Puff Effect
- Pulsate Effect
- .removeClass()
- Scale Effect
- Shake Effect
- .show()
- Size Effect
- Slide Effect
- .switchClass()
- .toggle()
- .toggleClass()
- Transfer Effect
- Effect Core
- .addClass()
- Color Animation
- .effect()
- .hide()
- .removeClass()
- .show()
- .switchClass()
- .toggle()
- .toggleClass()
- Interactions
- Draggable Widget
- Droppable Widget
- Mouse Interaction
- Resizable Widget
- Resizable Widget
- Selectable Widget
- Sortable Widget
- Method Overrides
- .addClass()
- .focus()
- .hide()
- .position()
- .removeClass()
- .show()
- .toggle()
- .toggleClass()
- Methods
- .disableSelection()
- .effect()
- .enableSelection()
- .focus()
- .hide()
- .position()
- .removeUniqueId()
- .scrollParent()
- .show()
- .toggle()
- .uniqueId()
- .zIndex()
- Selectors
- :data() Selector
- :focusable Selector
- :tabbable Selector
- Theming
- CSS 框架（CSS Framework）
- Icons
- Stacking Elements
- UI Core
- :data() Selector
- .disableSelection()
- .enableSelection()
- .focus()
- :focusable Selector
- .removeUniqueId()
- .scrollParent()
- :tabbable Selector
- .uniqueId()
- .zIndex()
- Utilities
- Easings
- Widget Factory
- Widget Plugin Bridge
- Mouse Interaction
- .position()
- Widgets
- Accordion Widget
- Autocomplete Widget
- Button Widget
- Datepicker Widget
- Dialog Widget
- Menu Widget
- Progressbar Widget
- Slider Widget
- Spinner Widget
- Tabs Widget
- Tooltip Widget