手风琴布局(Accordion)

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

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 %}

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...

{% endhighlight %}

上面的代码:

JavaScript API

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

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

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

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

事件

手风琴有这些事件:

事件名称 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 %}