手風琴 / 可折疊

手風琴版面配置

常見的手風琴版面配置可以視為下列範例

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

其中

手風琴清單 - 手風琴項目清單組。選用類別
- 手風琴項目 - 單一手風琴項目。必填
  - 手風琴項目切換 - 展開/收合手風琴項目內容的連結。必填
  - 手風琴項目內容 - 隱藏的手風琴項目內容。必填
- 手風琴項目已開啟 - 單一已開啟的手風琴項目

可收合版面配置

如果您想要使用單一獨立的可收合元素，您可能只需要省略「手風琴清單」包裝元素

<!-- 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>

手風琴清單檢視

如果您使用清單檢視作為手風琴，您可以使用「項目連結」元素取代「手風琴切換」

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

反向手風琴

要在反向側呈現手風琴人字形圖示（在 LTR 中為左側），需要在手風琴容器或手風琴清單中新增額外 手風琴反向 類別

<!-- 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>

範例

accordion.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Accordion</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">List View Accordion</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">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</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">Item 1</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">Item 2</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">Item 3</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">Item 4</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">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div class="block-title">Opposite Side</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">Lorem Ipsum</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
        <li class="accordion-item">
          <a class="item-link item-content">
            <div class="item-inner">
              <div class="item-title">Nested List</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">Item 1</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">Item 2</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">Item 3</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">Item 4</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">Integer semper</div>
            </div>
          </a>
          <div class="accordion-item-content">
            <div class="block">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel
                justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor
                vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis
                viverra blandit suscipit eget ipsum.
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>

手風琴應用程式方法

手風琴也有一個 JavaScript API，讓您可以透過程式開啟和關閉它們。讓我們看看一些手風琴應用程式方法

app.accordion.open(項目) - 開啟指定的手風琴項目

項目 - 手風琴項目元素 (<div class="accordion-item">) 的 HTMLElement 或字串 (使用 CSS 選擇器)。必填

app.accordion.close(項目) - 關閉指定的手風琴項目

項目 - 手風琴項目元素 (<div class="accordion-item">) 的 HTMLElement 或字串 (使用 CSS 選擇器)。必填

app.accordion.toggle(項目) - 切換指定的手風琴項目

項目 - 手風琴項目元素 (<div class="accordion-item">) 的 HTMLElement 或字串 (使用 CSS 選擇器)。必填

手風琴事件

手風琴會在手風琴項目上觸發下列 DOM 事件，並在應用程式執行個體上觸發應用程式事件

DOM 事件

事件	目標	說明
手風琴：開啟前	手風琴項目<div class="accordion-item">	事件會在手風琴內容開始開啟動畫之前觸發。`event.detail.prevent` 包含一個函式，在呼叫時會防止手風琴開啟
手風琴：開啟	手風琴項目<div class="accordion-item">	事件會在手風琴內容開始開啟動畫時觸發
手風琴：已開啟	手風琴項目<div class="accordion-item">	手風琴內容完成開啟動畫後會觸發事件
accordion:beforeclose	手風琴項目<div class="accordion-item">	手風琴內容開始其關閉動畫之前會觸發事件。`event.detail.prevent`包含在呼叫時會防止手風琴關閉的函式
accordion:close	手風琴項目<div class="accordion-item">	手風琴內容開始其關閉動畫時會觸發事件
accordion:closed	手風琴項目<div class="accordion-item">	手風琴內容完成其關閉動畫後會觸發事件

應用程式事件

事件	參數	說明
accordionBeforeOpen	(el, prevent)	手風琴內容開始其開啟動畫之前會觸發事件。`prevent`包含在呼叫時會防止手風琴開啟的函式
accordionOpen	(el)	事件會在手風琴內容開始開啟動畫時觸發
accordionOpened	(el)	手風琴內容完成開啟動畫後會觸發事件
accordionBeforeClose	(el, prevent)	手風琴內容開始其關閉動畫之前會觸發事件。`prevent`包含在呼叫時會防止手風琴關閉的函式
accordionClose	(el)	手風琴內容開始其關閉動畫時會觸發事件
accordionClosed	(el)	手風琴內容完成其關閉動畫後會觸發事件

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);
});

改善此文件

在此頁面上

手風琴版面配置
可收合版面配置
手風琴清單檢視
反向手風琴
範例
手風琴應用程式方法
手風琴事件

DOM 事件
應用程式事件