amp-accordion
- 簡介設定基本用法自訂樣式隱藏標題巢狀手風琴自動摺疊手風琴動畫手風琴比較手風琴 content-head {

網站

amp-accordion

簡介

手風琴效果讓瀏覽者可以概略瀏覽內容大綱，並隨意跳到所選章節。

設定

匯入 amp-accordion 元件。

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

基本用法

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

章節 1

大量精采內容。

章節 2

更多精采內容。這次在 <div> 中。

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

自訂樣式

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

隱藏標題

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

顯示更多

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

巢狀手風琴

您甚至可以巢狀多個手風琴效果。請務必避免根據封閉 amp-accordion 的展開狀態來設定元素樣式。特別是，避免過於通用的規則，例如

section[expanded] h4 {
  ...
}

而是直接鎖定元素

section[expanded] > h4 {
  ...
}

章節 1

大量內容。

章節 2

巢狀章節 2.1

大量內容。

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

自動摺疊手風琴

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

章節 1

章節 2

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

動畫手風琴

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

章節 1

章節 2

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

比較手風琴

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

在這裡，我們使用 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

簡介

設定

基本用法

章節 1

章節 2

章節 3

自訂樣式

顯示更多 顯示較少

隱藏標題

顯示更多

巢狀手風琴

章節 1

章節 2

巢狀章節 2.1

巢狀章節 2.2

自動摺疊手風琴

章節 1

章節 2

章節 3

動畫手風琴

章節 1

章節 2

章節 3

比較手風琴

{{headingName}}

{{rowLabel}}

顯示更多顯示較少