手风琴布局/可折叠布局(Accordion / Collapsible)

优质
小牛编辑
136浏览
2023-12-01

手风琴布局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 说明
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"> 某一条目完成关闭动画后触发
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');
});