首页 » Framework7 » Framework7 组件
网站地图

手风琴布局／可折叠布局（Accordion / Collapsible）

手风琴布局Accordion Layout

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

<div class="accordion-list">
    <div class="accordion-item">
        <div class="accordion-item-toggle">...</div>
        <div class="accordion-item-content">...</div>
    </div>
    <div class="accordion-item accordion-item-expanded">
        <div class="accordion-item-toggle">...</div>
        <div class="accordion-item-content">...</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-item-toggle">...</div>
        <div class="accordion-item-content">...</div>
    </div>
    ...
</div>

上面的代码:

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

折叠布局(Collapsible Layout)

如果你希望独立的可折叠元素，你可以不使用"accordion-list"包裹元素:

    <!-- Single collapsible element -->
    <div class="accordion-item">
        <div class="accordion-item-toggle">...</div>
        <div class="accordion-item-content">...</div>
    </div>
    <!-- Another separate collapsible element -->
    <div class="accordion-item">
        <div class="accordion-item-toggle">...</div>
        <div class="accordion-item-content">...</div>
    </div>

手风琴列表视图（Accordion List View）

如果你希望给列表视图加上手风琴布局，你应该使用"item-link"元素而不是"accordion-toggle"元素:

<div class="list-block accordion-list">
    <ul>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 1</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 1 content ...</div>
        </li>
        <li class="accordion-item">
            <a href="" class="item-link item-content">
                <div class="item-inner">
                    <div class="item-title">Item 2</div>
                </div>
            </a>
            <div class="accordion-item-content">Item 2 content ...</div>
        </li>
    </ul>
</div>

示例

<!-- List View -->
<div class="content-block-title">List View Accordion</div>
<div class="list-block accordion-list">
  <ul>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="content-block">
          <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="content-block">
          <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
<!-- Separate collapsibles - omit "accordion-list" class-->
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
  <ul>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 1</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="content-block">
          <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    <li class="accordion-item"><a href="#" class="item-content item-link">
        <div class="item-inner">
          <div class="item-title">Item 2</div>
        </div></a>
      <div class="accordion-item-content">
        <div class="content-block">
          <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
        </div>
      </div>
    </li>
    ...
  </ul>
</div>
<!-- Custom Accordion -->
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
  <div class="accordion-item">
    <div class="accordion-item-toggle">
      <i class="icon icon-plus">+</i>
      <i class="icon icon-minus">-</i>
      <span>Item 1</span>
    </div>
    <div class="accordion-item-content">
      <p>Item 1 content. Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-toggle">
      <i class="icon icon-plus">+</i>
      <i class="icon icon-minus">-</i>
      <span>Item 2</span>
    </div>
    <div class="accordion-item-content">
      <p>Item 2 content. Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  ...
</div>

实例预览

JavaScript API

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

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

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

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

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

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

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

事件

手风琴有这些事件:

事件名称Target说明
openAccordion item<div class="accordion-item">某一条目开始执行打开动画的时候会触发
openedAccordion item<div class="accordion-item">某一条目完成打开动画后触发
closeAccordion item<div class="accordion-item">某一条目开始执行关闭动画的时候会触发
closedAccordion item<div class="accordion-item">某一条目完成关闭动画后触发
var myApp = new Framework7();
 
var $$ = Dom7;
 
$$('.accordion-item').on('opened', function () {
  myApp.alert('Accordion item opened');
}); 
 
$$('.accordion-item').on('closed', function (e) {
  myApp.alert('Accordion item closed');
});