一：手風琴效果

手風琴效果類似於列表視圖，不同的地方在於：點擊列表元素時，會展開列表元素，展示詳細的元素信息，而不是跳轉到詳情頁；再次點擊，就折疊起來。

二：手風琴布局(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>

Framework7學習筆記之 手風琴效果(折疊、展開效果)