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}}

显示更多显示更少