amp-accordion
- Introduction (簡介) Setup (設定) Basic usage (基本用法) Custom styling (自訂樣式) Hidden header (隱藏標題) Nested accordion (巢狀手風琴) Auto-collapsing accordion (自動摺疊手風琴) Animated accordion (動畫手風琴) Comparison accordion (比較手風琴) content-head {

網站

amp-accordion

Introduction (簡介)

手風琴提供檢視者概覽內容大綱的方式，並可隨意跳至他們選擇的章節。

Setup (設定)

匯入 amp-accordion 元件。

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

Basic usage (基本用法)

一個 amp-accordion 由多個 section 組成。每個 <section> 必須有兩個直接子元素。第一個子元素將被視為章節的標題。點擊/輕觸此章節將觸發展開/摺疊行為。使用 disable-session-states 屬性可停用跨工作階段保留手風琴狀態的功能。

Section 1 (章節 1)

大量優質內容。

Section 2 (章節 2)

更多優質內容。這次放在 <div> 中。

Section 3 (章節 3)

圖片也能正常運作。

<amp-accordion class="sample">
  <section expanded>
    <h4>Section 1</h4>
    <p>Bunch of awesome content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <div>Bunch of even more awesome content. This time in a <code>&lt;div&gt;</code>.</div>
  </section>
  <section>
    <h4>Section 3</h4>
    <figure>
      <amp-img src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
      <figcaption>Images work as well.</figcaption>
    </figure>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Custom styling (自訂樣式)

amp-accordion 會將 expanded 屬性新增至任何展開的元素。您可以使用 CSS 屬性選取器，根據手風琴章節是展開或摺疊來設定樣式。使用 section[expanded] 為展開狀態設定樣式，並使用 section:not([expanded]) 為摺疊狀態設定樣式。

amp-accordion section[expanded] .show-more {
  display: none;
}

amp-accordion section:not([expanded]) .show-less {
  display: none;
}

此範例根據章節是否展開顯示不同的標題。

顯示更多顯示較少

Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu in eu wisi.

<amp-accordion class="sample" disable-session-states>
  <section>
    <h4><span class="show-more">Show more</span> <span class="show-less">Show less</span></h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Hidden header (隱藏標題)

此範例在「顯示更多」按鈕點擊後會將其隱藏。

顯示更多

<amp-accordion class="sample hidden-header" disable-session-states>
  <section>
    <h4><span class="show-more">Show more</span></h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Nested accordion (巢狀手風琴)

您甚至可以巢狀多個手風琴。只要確保避免根據外層 amp-accordion 的展開狀態來設定元素樣式即可。特別是，避免過於通用的規則，例如

section[expanded] h4 {
  ...
}

而是直接指定元素

section[expanded] > h4 {
  ...
}

Section 1 (章節 1)

大量內容。

Section 2 (章節 2)

Nested Section 2.1 (巢狀章節 2.1)

大量內容。

Nested Section 2.2 (巢狀章節 2.2)

更多內容。

<amp-accordion class="sample" disable-session-states>
  <section>
    <h4>Section 1</h4>
    <p>Bunch of content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <amp-accordion class="nested-accordion">
      <section>
        <h4>Nested Section 2.1</h4>
        <p>Bunch of content.</p>
      </section>
      <section>
        <h4>Nested Section 2.2</h4>
        <p>Bunch of more content.</p>
      </section>
    </amp-accordion>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Auto-collapsing accordion (自動摺疊手風琴)

expand-single-section 屬性會強制手風琴在任何給定時間只允許展開一個章節。展開一個章節會導致任何其他開啟的章節關閉。

Section 1 (章節 1)

Section 2 (章節 2)

Section 3 (章節 3)

<amp-accordion class="sample" expand-single-section>
  <section>
    <h4>Section 1</h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
  <section>
    <h4>Section 2</h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
  <section>
    <h4>Section 3</h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Animated accordion (動畫手風琴)

animate 屬性會為手風琴章節的展開和摺疊新增動畫效果。

Section 1 (章節 1)

Section 2 (章節 2)

Section 3 (章節 3)

<amp-accordion class="sample" animate>
  <section>
    <h4>Section 1</h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
  <section>
    <h4>Section 2</h4>
    <amp-img src="/static/samples/img/clean-1.jpg" layout="responsive" width="400" height="710"></amp-img>
  </section>
  <section>
    <h4>Section 3</h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio,
      odio arcu in eu wisi. </p>
  </section>
</amp-accordion>

在 Playground 中開啟此程式碼片段

Comparison accordion (比較手風琴)

這使用動態資料實作比較/對比手風琴檢視畫面。

這裡我們使用 CSS 並排顯示元件。display: flex 和 width: 50% 欄位可讓我們並排檢視內容。我們在最後一個類別中修改 border 和 padding，以在手風琴中清楚定義並排的 2 個比較方塊。

#content-head {
  display: flex;
}
.fruit-title {
  width: 50%;
}
.comp-data {
  display: flex;
}
.comp-value {
  width: 50%;
  border: 1px solid;
  padding: 5px 18px;
  display: flex;

}

<amp-list src="/static/samples/json/accordion-fruit.json" height="170" width="auto" layout="fixed-height" items="." single-item id="fruitList">
  <template type="amp-mustache">
    <div id="content-head">
      <div class="fruit-title">
        <p>
          {{primaryFruit.subType}} {{primaryFruit.fruit}}
        </p>
        <amp-img src="{{primaryFruit.imageURL}}" width="50" height="50"></amp-img>
      </div>
      <div class="fruit-title">
        {{#competitorFruit}}
        <p>
          {{subType}} {{fruit}}
        </p>
        <amp-img src="{{imageURL}}" width="50" height="50"></amp-img>
        {{/competitorFruit}}
      </div>
    </div>
    <section>
      <amp-accordion animate disable-session-states expand-single-section on="expand:fruitList.changeToLayoutContainer;collapse:fruitList.changeToLayoutContainer">
        {{#comparisonData}}{{#heading}}
        <section [class]="'{{headingName}}'.split(' ')[0]">
            <h4>{{headingName}}</h4>
          <div>
            {{#rowAndSubHeading}}
              <h3>{{rowLabel}}</h3>
              <div class="comp-data">
                {{#fruitData}}
                <div class="comp-value">
                  {{colData}}
                </div>
                {{/fruitData}}
              </div>
            {{/rowAndSubHeading}}
          </div>
        </section>
        {{/heading}}{{/comparisonData}}
      </amp-accordion>
    </section>
  </template>
</amp-list>

在 Playground 中開啟此程式碼片段

需要更多說明嗎？

如果此頁面的說明無法解答您的所有問題，請隨時與其他 AMP 使用者交流，討論您的確切使用案例。

前往 Stack Overflow

有未說明的功能嗎？

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

在 GitHub 上編輯範例

作者 @sebastianbenz

amp-accordion

Introduction (簡介)

Setup (設定)

Basic usage (基本用法)

Section 1 (章節 1)

Section 2 (章節 2)

Section 3 (章節 3)

Custom styling (自訂樣式)

顯示更多 顯示較少

Hidden header (隱藏標題)

顯示更多

Nested accordion (巢狀手風琴)

Section 1 (章節 1)

Section 2 (章節 2)

Nested Section 2.1 (巢狀章節 2.1)

Nested Section 2.2 (巢狀章節 2.2)

Auto-collapsing accordion (自動摺疊手風琴)

Section 1 (章節 1)

Section 2 (章節 2)

Section 3 (章節 3)

Animated accordion (動畫手風琴)

Section 1 (章節 1)

Section 2 (章節 2)

Section 3 (章節 3)

Comparison accordion (比較手風琴)

{{headingName}}

{{rowLabel}}

顯示更多顯示較少