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

amp-accordion

 
You can now use this component outside valid AMP documents using the experimental Bento version of this component. Learn more in our Bento guide.

Description

提供一种方式，让观看者可以大致了解网页内容并随意跳至想查看的部分。

 

Required Scripts

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

Supported Layouts

提供一种方式，让观看者可以大致了解网页内容并跳至任意部分。对于甚至连一个部分中的几个句子都需要滚动才能完整显示的移动设备来说，这非常有用。

必需的脚本 <script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
支持的布局 container
示例 amp-accordion 代码示例（带注释）

行为

借助 amp-accordion 组件，您能够显示可收起和可展开的内容部分。amp-accordion 组件的每个直接子级均被视为可折叠内容中的一个部分。每个节点都必须是 <section> 标记。

  • amp-accordion 可以包含一个或多个 <section> 元素作为其直接子级。
  • 每个 <section> 都必须正好包含两个直接子级。
  • 某个部分的第一个子级表示该部分的标题，且必须是标题元素（h1、h2、…、h6、header 之一）。
  • 某个部分的第二个子级可以是 AMP HTML 中允许的任何标记，表示该部分的内容。
  • 点击/点按某个部分的标题即可展开或收起相应部分。
  • amp-accordion 元素中每个部分的收起/展开状态会保存下来供会话级别使用。要选择不保存此状态，请向 amp-accordion 元素添加 disable-session-states 属性。

示例：显示可折叠内容

在此示例中，我们显示了三个部分，其中第三个部分会在网页加载时展开。此外，我们通过设置 disable-session-states 选择不保存收起/展开状态。

Section 1

Content in section 1.

Section 2

Content in section 2.

Section 3

 
<amp-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-accordion 的更多演示，请访问 AMP By Example。

事件

以下事件会在 accordion 的 section 上触发。

expand 此事件会在从收起状态更改为展开状态的目标 section 上触发。请注意，在已展开的 section 上调用 expand 不会触发此事件。
collapse 此事件会在从展开状态更改为收起状态的目标 section 上触发。请注意，在已收起的 section 上调用 collapse 不会触发此事件。

操作

expand 此事件会在从收起状态更改为展开状态的目标 section 上触发。请注意，在已展开的 section 上调用 expand 不会触发此事件。
toggle 此操作会在 amp-accordion 的 expanded 和 collapsed 状态之间切换。如果不使用参数进行调用，此操作会在可折叠内容的所有部分之间切换。可以使用 section 参数指定单个部分，并使用对应 id 作为值。
expand 此操作可展开 amp-accordion。如果已执行 expanded 操作，相应部分将保持展开状态。如果不使用参数进行调用，此操作会展开可折叠内容的所有部分。可以使用 section 参数指定单个部分，并使用对应 id 作为值。
collapse 此操作可收起 amp-accordion。如果已收起，相应部分将保持收起状态。如果不使用参数进行调用，此操作会收起可折叠内容的所有部分。可以使用 section 参数指定单个部分，并使用对应 id 作为值。

属性

animate 在 <amp-accordion> 上设置此属性可以动画形式展开/收起所有可折叠部分。
disable-session-states 在 <amp-accordion> 上设置此属性可选择不保存可折叠内容的收起/展开状态。
expanded 在 <section> 上设置此属性可在网页加载时展开显示相应部分。
expand-single-section 在 <amp-accordion> 上设置此属性可一次仅展开一个 <section>。如果用户将焦点放在某个 <section>，那么之前已展开的所有其他 <section> 都将收起。

样式设置

  • 您可以使用 amp-accordion 元素选择器自由设置样式。
  • amp-accordion 元素始终为 display: block。
  • <section>、标题和内容元素无法浮动。
  • 展开某个部分后，该 <section> 元素就具有 expanded 属性。
  • 内容元素通过 overflow: hidden 明确固定，因此不能有滚动条。
  • <amp-accordion>、<section>、标题和内容元素的外边距设为 0，这些值可在自定义样式中替换。
  • 标头和内容元素都是 position: relative。

验证

请参阅 AMP 验证工具规范中的 amp-accordion 规则。

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow
发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub