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 中開啟此程式碼片段

disable-session-states

在 <amp-accordion> 中加入 disable-session-states 屬性，以停用摺疊/展開狀態保留功能。

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 中開啟此程式碼片段

動作

toggle

toggle 動作會切換 amp-accordion 區塊的 expanded 和 collapsed 狀態。在不使用引數呼叫時，它會切換手風琴的所有區塊。若要指定特定區塊，請加入 section 引數，並使用其對應的 id 作為值。

 
<amp-accordion id="myAccordion">
  <section id="section1">
    <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:myAccordion.toggle">Toggle All Sections</button>
<button on="tap:myAccordion.toggle(section='section1')">
  Toggle Section 1
</button>
在 playground 中開啟此程式碼片段

expand

expand 動作會展開 amp-accordion 的區塊。如果區塊已展開，則會保持展開狀態。在不使用引數呼叫時，它會展開手風琴的所有區塊。若要指定區塊，請加入 section 引數，並使用其對應的 id 作為值。

<button on="tap:myAccordion.expand">Expand All Sections</button>
<button on="tap:myAccordion.expand(section='section1')">
  Expand Section 1
</button>

collapse

collapse 動作會摺疊 amp-accordion 的區塊。如果區塊已摺疊，則會保持摺疊狀態。在不使用引數呼叫時，它會摺疊手風琴的所有區塊。若要指定區塊，請加入 section 引數，並使用其對應的 id 作為值。

<button on="tap:myAccordion.collapse">Collapse All Sections</button>
<button on="tap:myAccordion.collapse(section='section1')">
  Collapse Section 1
</button>

活動

當按一下或輕觸手風琴區塊時，會觸發下列 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 (state)：套用至每個 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