折叠展开

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-opened">
    <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>

Where

accordion-list - 手风琴项集合。可选类
- accordion-item - 单个手风琴项。必需
  - accordion-item-toggle - 展开/折叠手风琴项内容的链接。必需
  - accordion-item-content - 隐藏的手风琴项内容。必需
- accordion-item-opened - 单个已展开的手风琴项

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

p 为了在相反的一侧（在从左到右的布局中在左侧）显示手风琴的箭头图标，需要在手风琴容器或手风琴列表中添加额外的accordion-opposite类。

<div class="list 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>

Opposite Accordion

为了在相反的一侧（在从左到右的布局中在左侧）显示手风琴的箭头图标，需要在手风琴容器或手风琴列表中添加额外的accordion-opposite类。

<!-- Accordion opposite -->
<div class="accordion-list accordion-opposite">
  <div class="accordion-item">
    <div class="accordion-item-toggle">...</div>
    <div class="accordion-item-content">...</div>
  </div>
  <div class="accordion-item accordion-item-opened">
    <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 opposite -->
<div class="list accordion-list accordion-opposite">
  <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>

Example

accordion.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">返回</span>
        </a>
      </div>
      <div class="title">折叠面板</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">折叠列表视图</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">小故事</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                从前有一个小村庄，村里住着一个小女孩叫小花。小花是村里唯一的孤儿，她没有父母，由村民们一起照顾着。

                小花是个活泼可爱的小女孩，她总是带着笑容，给村民们带来了无尽的欢乐。尽管没有亲人，但小花并不觉得孤单，因为她有一颗感恩的心。

                有一天，小花在村子里捡到了一只可怜的小猫，它受伤了，小花立刻把它带回家，并给它取名叫小咪。小花对小咪非常照顾，每天给它喂食，给它洗澡，还给它讲故事。

                小咪也很喜欢小花，它总是围着小花转，不离不弃。小花和小咪成了无话不谈的好朋友，他们一起玩耍，一起度过了快乐的时光。

              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">套嵌列表</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">贵宾</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">卡项</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">产品</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">美容师</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">更多</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                美容院卡项是指美容院为顾客提供的一系列服务项目的套餐或者预付卡。顾客可以根据自己的需求和喜好选择不同的卡项，
                从而享受到一定的服务折扣或者特殊权益。美容院卡项通常包括各种美容护理项目，如面部护理、身体护理、美发、美甲等。
                卡项的种类和价格会根据美容院的规模、地理位置、服务质量等因素而有所不同。顾客可以根据自己的需求和预算选择适合自己的卡项，以便在一段时间内享受到连续的美容服务。
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">操作图标在左侧</div>
    <div class="list list-strong list-outline-ios list-dividers-ios inset-md accordion-opposite accordion-list">
      <ul>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">家居产品</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                美容院家居产品指的是在美容院或个人家庭中使用的与美容相关的家居产品。这些产品可以包括各种美容仪器、美容工具、美容用品以及美容家具等。常见的美容院家居产品包括美容床、美容椅、美容镜、美容仪器（如脱毛仪、美容仪、微针仪等）、美容工具（如化妆刷、按摩器、美甲工具等）以及各类美容用品（如面膜、洗面奶、护肤品等）等。这些产品可以提供各种美容服务和个人护理需求，帮助人们改善肌肤状况、提升容貌美感。
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">嵌套列表</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="list">
              <ul>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">子卡</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media"> <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">子产品</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">子美容师</div>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="item-content">
                    <div class="item-media">
                      <i class="icon icon-f7"></i>
                    </div>
                    <div class="item-inner">
                      <div class="item-title">子设置</div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">美容管理</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                美容管理是指通过各种方法和技术来改善和维护人体外貌的活动和过程。它包括对皮肤、头发、指甲和整体形象的护理和保养。美容管理的目标是提高个人形象的吸引力和自信心，减缓衰老迹象，改善皮肤质量，改变身体外观等。美容管理可以包括面部护理、化妆、美发、美甲、身体护理、健身、饮食和保健等方面。
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>

Accordion App Methods

手风琴还有一个JavaScript API，允许您以编程方式打开和关闭它们。让我们看一下一些手风琴应用的方法：

app.accordion.open(item) - open specified accordion item

item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required

app.accordion.close(item) - close specified accordion item

item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required

app.accordion.toggle(item) - toggle specified accordion item

item - HTMLElement or string (with CSS Selector) of accordion-item element (<div class="accordion-item">). Required

Accordion Events

Accordion will fire the following DOM events on accordion items and app events on app instance:

DOM Events

Event	Target	Description
accordion:beforeopen	Accordion item<div class="accordion-item">	Event will be triggered right before accordion content starts its opening animation. `event.detail.prevent` contains function that will prevent accordion from opening when called
accordion:open	Accordion item<div class="accordion-item">	Event will be triggered when accordion content starts its opening animation
accordion:opened	Accordion item<div class="accordion-item">	Event will be triggered after accordion content completes its opening animation
accordion:beforeclose	Accordion item<div class="accordion-item">	Event will be triggered right before accordion content starts its closing animation. `event.detail.prevent` contains function that will prevent accordion from closing when called
accordion:close	Accordion item<div class="accordion-item">	Event will be triggered when accordion content starts its closing animation
accordion:closed	Accordion item<div class="accordion-item">	Event will be triggered after accordion content completes its closing animation

App Events

Event	Arguments	Description
accordionBeforeOpen	(el, prevent)	Event will be triggered right before accordion content starts its opening animation. `prevent` contains function that will prevent accordion from opening when called
accordionOpen	(el)	Event will be triggered when accordion content starts its opening animation
accordionOpened	(el)	Event will be triggered after accordion content completes its opening animation
accordionBeforeClose	(el, prevent)	Event will be triggered right before accordion content starts its closing animation. `prevent` contains function that will prevent accordion from closing when called
accordionClose	(el)	Event will be triggered when accordion content starts its closing animation
accordionClosed	(el)	Event will be triggered after accordion content completes its closing animation

var app = new Framework7();

var $ = Dom7;

$('.accordion-item').on('accordion:opened', function () {
  app.dialog.alert('Accordion item opened');
});

$('.accordion-item').on('accordion:closed', function (e) {
  app.dialog.alert('Accordion item closed');
});

app.on('accordionOpened', function (el) {
  console.log('The following element opened:');
  console.log(el);
});

← App / Core核心

操作菜单 →

Improve this Doc

On this page

Accordion Layout
Collapsible Layout
Accordion List View
Opposite Accordion
Example
Accordion App Methods
Accordion Events

DOM Events
App Events