## 手风琴布局（Accordion）

通常，手风琴布局可以这样实现:

List View Accordion

- Item 1

  Item 1 content. Lorem ipsum dolor sit amet...

- Item 2

  Item 2 content. Lorem ipsum dolor sit amet...

Separate Collapsibles

- Item 1

  Item 1 content. Lorem ipsum dolor sit amet...

- Item 2

  Item 2 content. Lorem ipsum dolor sit amet...

Custom Accordion
+ - Item 1

Item 1 content. Lorem ipsum dolor sit amet...

+ - Item 2

Item 2 content. Lorem ipsum dolor sit amet...

{% highlight html %}
List View Accordion

- Item 1

  Item 1 content. Lorem ipsum dolor sit amet...

- Item 2

  Item 2 content. Lorem ipsum dolor sit amet...

Separate Collapsibles

- Item 1

  Item 1 content. Lorem ipsum dolor sit amet...

- Item 2

  Item 2 content. Lorem ipsum dolor sit amet...

Custom Accordion
+ - Item 1

Item 1 content. Lorem ipsum dolor sit amet...

+ - Item 2

Item 2 content. Lorem ipsum dolor sit amet...

{% endhighlight %}

上面的代码:

- `accordion-list` - 多个手风琴元素的列表. 可选
- `accordion-item` - 单个手风琴元素. 必选
- `accordion-item-toggle` - 用来展开／折叠手风琴元素内容的开关. 必选
- `accordion-item-content` - 隐藏的手风琴元素的内容. 必选
- `accordion-item-expanded` - 展开的手风琴元素

### JavaScript API

手风琴组件有JavaScript API，你可以在JS中控制打开和关闭。方法说明如下：

`$.accordionOpen(item)` - 打开指定的条目

- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须。

`$.accordionClose(item)` - 关闭指定条目

- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). 必须

`$.accordionToggle(item)` - toggle 指定条目

- item - HTMLElement or string (想要操作的条目的CSS选择器 (<div class="accordion-item">). Required

### 事件

手风琴有这些事件:

事件名称 | Target | 说明
--- | --- | ---
open | Accordion item<div class="accordion-item"> | 某一条目开始执行打开动画的时候会触发
opened | Accordion item<div class="accordion-item"> | 某一条目完成打开动画后触发
close | Accordion item<div class="accordion-item"> | 某一条目开始执行关闭动画的时候会触发
closed | Accordion item<div class="accordion-item"> | 某一条目完成关闭动画后触发

{% highlight js %} $(document).on('opened', '.accordion-item', function () { $.alert('Accordion item opened'); }); $(document).on('closed', '.accordion-item', function (e) { $.alert('Accordion item closed'); }); {% endhighlight %}