amp-accordion

1.0 0.1

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

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-1.0.js"></script>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-accordion-1.0.css">

提供了一种让观看者浏览内容大纲并跳转到任何部分的方式。这对于移动设备很有帮助，即使只是一个部分中的几句话也需要滚动。

用法

amp-accordion 组件允许您显示可折叠和展开的内容部分。此组件提供了一种让观看者浏览内容大纲并跳转到任何部分的方式。有效使用可以减少移动设备上的滚动需求。

• amp-accordion 接受一个或多个 <section> 元素作为其直接子元素。
• 每个 <section> 必须恰好包含两个直接子元素。
• <section> 中的第一个子元素是 amp-accordion 该部分的标题。它必须是标题元素，例如 <h1>-<h6> 或 <header>。
• <section> 中的第二个子元素是可展开/折叠的内容。它可以是 AMP HTML 中允许的任何标签。
• 点击或轻触 <section> 标题会展开或折叠该部分。
• 具有定义的 id 的 amp-accordion 会在用户保持在您的域上时保留每个部分的折叠或展开状态。

示例

下面的示例包含一个具有三个部分的 amp-accordion。第三个部分的 expanded 属性会在页面加载时将其展开。

<amp-accordion id="my-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>

在有效的 AMP 文档之外的独立使用

Bento 允许您在非 AMP 页面中使用 AMP 组件，而无需完全提交到有效的 AMP。您可以将这些组件放置在不支持 AMP 的框架和 CMS 的实现中。在我们的指南 在非 AMP 页面中使用 AMP 组件 中了解更多信息。

要查找 amp-accordion 的独立版本，请参阅 bento-accordion。

属性

animate

在 <amp-accordion> 中包含 animate 属性，以便在内容展开时添加“向下滚动”动画，在折叠时添加“向上滚动”动画。

此属性可以配置为基于 媒体查询。

<amp-accordion animate>
  <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>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>

expanded

将 expanded 属性应用于嵌套的 <section>，以在页面加载时展开该部分。

使用 amp-bind 将 [expanded] 属性绑定到以编程方式展开或折叠 <section> 元素。当表达式评估为 false 时，展开的部分会折叠。如果表达式评估为 false 以外的任何值，则折叠的部分会展开。

<amp-accordion>
  <section
    [expanded]="sectionOne"
    on="expand:AMP.setState({sectionOne: true});collapse:AMP.setState({sectionOne: false})"
  >
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
  <section expanded>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:AMP.setState({sectionOne: true})">Expand section 1</button>
<button on="tap:AMP.setState({sectionOne: false})">Collapse section 1</button>

expand-single-section

通过将 expand-single-section 属性应用于 <amp-accordion> 元素，一次只允许展开一个部分。这意味着，如果用户点击折叠的 <section>，它将展开并折叠其他展开的 <section>。

<amp-accordion expand-single-section>
  <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>
    <h2>Section 3</h2>
    <amp-img
      src="/static/inline-examples/images/squirrel.jpg"
      width="320"
      height="256"
    ></amp-img>
  </section>
</amp-accordion>

样式

amp-accordion 元素选择器根据您的规范设置 amp-accordion 的样式。以下示例将背景颜色更改为绿色

amp-accordion {
  background-color: green;
}

在设置 amp-accordion 的样式时，请记住以下几点

• amp-accordion 元素始终是 display: block。
• float 无法设置 <section>、标题或内容元素的样式。
• 展开的部分将 expanded 属性应用于 <section> 元素。
• 内容元素使用 overflow: hidden 清除固定，因此不能有滚动条。
• <amp-accordion>、<section>、标题和内容元素的边距设置为 0，但可以在自定义样式中被覆盖。
• 标题和内容元素都是 position: relative。

可访问性

amp-accordion 自动添加以下 ARIA 属性

• aria-controls：应用于每个 amp-accordion 部分的标题元素。
• aria-expanded (state)：应用于每个 amp-accordion 部分的标题元素。
• aria-labelledby：应用于每个 amp-accordion 部分的内容元素。

amp-accordion 还会自动添加以下可访问性属性

• tabindex：应用于每个 amp-accordion 部分的标题元素。
• role=button：应用于每个 amp-accordion 部分的标题元素。
• role=region：应用于每个 amp-accordion 部分的内容元素。

版本说明

实验性的 1.0 版本 amp-accordion 不支持会话状态。它的行为就像始终应用了 disable-session-states 属性一样。

版本 0.1 和 1.0 与 amp-bind 兼容，但一些绑定语法有所不同。您可以在版本 1.0 中直接使用 expanded 属性进行绑定。版本 1.0 不支持 data-expand 绑定。有关更多信息，请参阅 expanded 属性。