Framework7学习笔记之 手风琴效果(折叠、展开效果)

一：手风琴效果

手风琴效果类似于列表视图，不同的地方在于：点击列表元素时，会展开列表元素，展示详细的元素信息，而不是跳转到详情页；再次点击，就折叠起来。

二：手风琴布局(list的升级版)

<div class="list-block accordion-list">//增加accordion-list类
  <ul>
    <li class="accordion-item">
        <a href="#" class="item-content item-link">//此时，点击元素不会跳转到详情页，而是展开列表元素
        <div class="item-inner">
          <div class="item-title">列表元素标题</div>
        </div>
        </a>
      <div class="accordion-item-content">
        列表元素详情...
      </div>
    </li>
    。。。。
  </ul>
</div>

三：可折叠布局（单独定义的元素，具有可折叠、展开效果）

<div class="accordion-item">
        <div class="accordion-item-toggle">折叠时的显示内容</div>
        <div class="accordion-item-content">展开内容</div>
    </div>

原文地址：https://www.cnblogs.com/ygj0930/p/8458351.html