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

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

amp-accordion

實驗性
Bento

說明

堆疊的標題列表，可透過使用者互動來摺疊或展開內容區段。

 

必要指令碼

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.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 (遊樂場) 中開啟此程式碼片段

在有效的 AMP 文件之外獨立使用

Bento 允許您在非 AMP 頁面中使用 AMP 元件，而無需完全採用有效的 AMP。您可以取得這些元件，並將它們放置在使用不支援 AMP 的框架和 CMS 的實作中。請參閱我們的指南 在非 AMP 頁面中使用 AMP 元件，以瞭解更多資訊。

若要尋找 amp-accordion 的獨立版本，請參閱 bento-accordion。

屬性

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>，以便在頁面載入時展開該區段。

使用 amp-bind 將 [expanded] 屬性繫結，以程式化方式展開或摺疊 <section> 元素。當運算式評估為 false 時，展開的區段會摺疊。如果運算式評估為非 false 的任何值，則摺疊的區段會展開。

 
<amp-accordion>
  <section
    [expanded]="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 expanded>
    <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 (遊樂場) 中開啟此程式碼片段

expand-single-section (展開單一區段)

將 expand-single-section 屬性套用至 <amp-accordion> 元素，即可一次只展開一個區段。這表示如果使用者點擊摺疊的 <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 (遊樂場) 中開啟此程式碼片段

樣式設定

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 區段的內容元素。

版本注意事項

實驗性的 1.0 版本 amp-accordion 不支援工作階段狀態。它的行為就像永遠套用 disable-session-states 屬性一樣。

版本 0.1 和 1.0 與 amp-bind 相容，但某些繫結語法不同。您可以在版本 1.0 中直接使用 expanded 屬性進行繫結。版本 1.0 不支援 data-expand 繫結。請參閱 expanded 屬性 以取得更多資訊。

需要更多協助嗎？

您已經閱讀這份文件好幾次了，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有同樣的感覺：在 Stack Overflow 上與他們交流。

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

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

前往 GitHub