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

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 接受一個或多個 <section> 元素作為其直接子元素。
  • 每個 <section> 都必須正好包含兩個直接子元素。
  • <section> 中的第一個子元素是 amp-accordion 該區塊的標題。它必須是標題元素，例如 <h1>-<h6> 或 <header>。
  • <section> 中的第二個子元素是可展開/摺疊的內容。它可以是 AMP HTML 中允許的任何標籤。
  • 點擊或輕觸 <section> 標題會展開或摺疊該區塊。
  • 具有已定義 id 的 amp-accordion 會在使用者停留在您的網域時，保留每個區塊的摺疊或展開狀態。

範例

以下範例包含具有三個區塊的 amp-accordion。第三個區塊上的 expanded 屬性會在頁面載入時展開它。包含 disable-session-state 屬性以保留摺疊/展開狀態。

 
<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