amp-accordion

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

必需的脚本	`<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 选择不保存收起/展开状态。

显示完整代码

如需查看 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 规则。

需要更多帮助？

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow

Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub