AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

重要事項：本文件不適用於您目前選取的格式 stories！

amp-accordion

 
您現在可以在有效的 AMP 文件之外使用此元件，方法是使用此元件的 Bento 版本。在 Bento 指南中瞭解更多資訊。

說明

堆疊的標題列表，使用者互動時可摺疊或展開內容區塊。

 

必要指令碼

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

支援的版面配置

提供檢視者快速瀏覽內容大綱並跳至任何區塊的方式。這對於行動裝置非常實用，即使區塊中只有幾句話也需要捲動。

用法

amp-accordion 元件可讓您顯示可摺疊和展開的內容區塊。此元件提供檢視者快速瀏覽內容大綱並跳至任何區塊的方式。有效使用可減少行動裝置上的捲動需求。

範例

以下範例包含一個具有三個區塊的 amp-accordion。第三個區塊上的 expanded 屬性會在頁面載入時展開該區塊。

 
<amp-accordion id="my-accordion" disable-session-states>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <amp-img src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"></amp-img>
  </section>
</amp-accordion>
在 Playground 中開啟此程式碼片段

屬性

animate

在 <amp-accordion> 中加入 animate 屬性，即可在內容展開時加入「向下捲動」動畫，並在摺疊時加入「向上捲動」動畫。

 
<amp-accordion animate>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>
在 Playground 中開啟此程式碼片段

expanded

將 expanded 屬性套用至巢狀 <section>，即可在頁面載入時展開該區塊。

expand-single-section

將 expand-single-section 屬性套用至 amp-accordion，即可指定一次只能展開一個 <section>。如果使用者點擊或輕觸已摺疊的 <section>，任何目前已展開的 <section> 都會摺疊。

 
<amp-accordion expand-single-section>
  <section>
    <h2>Section 1</h2>
    <p>Content in section 1.</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Content in section 2.</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>
在 Playground 中開啟此程式碼片段

[data-expand]

將 [data-expand] 屬性繫結至 <section>，即可展開或摺疊該區塊。如果運算式評估為 false，展開的區塊會摺疊。如果運算式評估為 false 以外的任何值，摺疊的區塊會展開。

 
<amp-accordion>
  <section
    [data-expand]="sectionOne"
    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
  >
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>
在 Playground 中開啟此程式碼片段

活動

當點擊或輕觸手風琴摺疊區塊時，下列 amp-accordion 事件會觸發。

expand

expand 事件會觸發目標 amp-accordion 區塊從摺疊狀態變更為展開狀態。在已展開的區塊上呼叫 expand，即可觸發 expand 事件。

 
<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 Playground 中開啟此程式碼片段

collapse

collapse 事件會觸發目標 amp-accordion 區塊從展開狀態變更為摺疊狀態。在已摺疊的區塊上呼叫 collapse，即可觸發事件。

 
<amp-accordion id="myAccordion">
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
    <h2>Section 2</h2>
    <div>Closing me will close Section 1</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 Playground 中開啟此程式碼片段

樣式設定

amp-accordion 元素選取器會根據您的規格設定 amp-accordion 的樣式。以下範例將背景顏色變更為綠色

amp-accordion {
  background-color: green;
}

在設定 amp-accordion 樣式時，請記住下列幾點

  • amp-accordion 元素一律為 display: block。
  • float 無法設定 <section>、標題或內容元素的樣式。
  • 展開的區塊會將 expanded 屬性套用至 <section> 元素。
  • 內容元素已透過 overflow: hidden 進行 clear-fix，因此無法有捲軸。
  • <amp-accordion>、<section>、標題和內容元素的邊界皆設為 0，但可以在自訂樣式中覆寫。
  • 標題和內容元素皆為 position: relative。

無障礙功能

amp-accordion 會自動新增下列 ARIA 屬性

  • aria-controls：套用至每個 amp-accordion 區塊的標題元素。
  • aria-expanded (狀態)：套用至每個 amp-accordion 區塊的標題元素。
  • aria-labelledby：套用至每個 amp-accordion 區塊的內容元素。

amp-accordion 也會自動新增下列無障礙功能屬性

  • tabindex：套用至每個 amp-accordion 區塊的標題元素。
  • role=button：套用至每個 amp-accordion 區塊的標題元素。
  • role=region：套用至每個 amp-accordion 區塊的內容元素。

驗證

請參閱 AMP 驗證器規格中的 amp-accordion 規則。

需要更多協助嗎？

您已閱讀本文件十幾次，但它似乎沒有涵蓋您的所有問題？可能其他人也有同樣的感覺：在 Stack Overflow 上與他們交流。

前往 Stack Overflow
發現錯誤或缺少功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性貢獻。

前往 GitHub