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

amp-accordion

 
您现在可以使用此组件在有效的 AMP 文档之外，使用此组件的 Bento 版本。 在 Bento 指南中了解更多信息。

描述

一个堆叠的标题列表，用户交互可以折叠或展开内容部分。

 

必需的脚本

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

支持的布局

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

用法

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

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

示例

下面的示例包含一个包含三个部分的 amp-accordion。 第三个部分的 expanded 属性会在页面加载时将其展开。 包括 disable-session-state 属性以保留折叠/展开状态。

 
<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>
在 Playground 中打开此代码段

属性

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>
在 Playground 中打开此代码段

disable-session-states

在 <amp-accordion> 上包含 disable-session-states 属性以禁用折叠/展开状态的保留。

expanded

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

expand-single-section

将 expand-single-section 属性应用于 amp-accordion，以指定一次只能展开一个 <section>。 如果用户单击或点击折叠的 <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>
在 Playground 中打开此代码段

[data-expand]

将 [data-expand] 属性绑定到 <section> 以展开或折叠该部分。 如果表达式求值为 false，则展开的部分会折叠。 如果表达式的求值结果不是 false，则折叠的部分会展开。

 
<amp-accordion>
  <section
    [data-expand]="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>
    <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>
在 Playground 中打开此代码段

操作

toggle

toggle 操作切换 amp-accordion 部分的 expanded 和 collapsed 状态。 当不带任何参数调用时，它会切换手风琴的所有部分。 要指定特定部分，请添加 section 参数，并使用其对应的 id 作为值。

 
<amp-accordion id="myAccordion">
  <section id="section1">
    <h2>Section 1</h2>
    <p>Bunch of awesome content</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <div>Bunch of awesome content</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
<button on="tap:myAccordion.toggle">Toggle All Sections</button>
<button on="tap:myAccordion.toggle(section='section1')">
  Toggle Section 1
</button>
在 Playground 中打开此代码段

expand

expand 操作展开 amp-accordion 的各个部分。 如果某个部分已展开，它将保持展开状态。 当不带任何参数调用时，它会展开手风琴的所有部分。 要指定一个部分，请添加 section 参数，并使用其对应的 id 作为值。

<button on="tap:myAccordion.expand">Expand All Sections</button>
<button on="tap:myAccordion.expand(section='section1')">
  Expand Section 1
</button>

collapse

collapse 操作折叠 amp-accordion 的各个部分。 如果某个部分已折叠，它将保持折叠状态。 当不带任何参数调用时，它会折叠手风琴的所有部分。 要指定一个部分，请添加 section 参数，并使用其对应的 id 作为值。

<button on="tap:myAccordion.collapse">Collapse All Sections</button>
<button on="tap:myAccordion.collapse(section='section1')">
  Collapse Section 1
</button>

活动

以下 amp-accordion 事件会在单击或点击手风琴部分时触发。

expand

expand 事件触发目标 amp-accordion 部分从折叠状态更改为展开状态。 在已展开的部分上调用 expand 以触发 expand 事件。

 
<amp-accordion id="myAccordion">
  <section id="section1" on="expand:myAccordion.expand(section='section2')">
    <h2>Section 1</h2>
    <p>Opening me will open Section 2</p>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 Playground 中打开此代码段

collapse

collapse 事件触发目标 amp-accordion 部分从展开状态更改为折叠状态。 在已折叠的部分上调用 collapse 以触发该事件。

 
<amp-accordion id="myAccordion">
  <section id="section2" on="collapse:myAccordion.collapse(section='section1')">
    <h2>Section 2</h2>
    <div>Closing me will close Section 1</div>
  </section>
  <section>
    <h2>Section 3</h2>
    <div>Bunch of awesome content</div>
  </section>
</amp-accordion>
在 Playground 中打开此代码段

样式

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 部分的内容元素。

验证

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

需要更多帮助？

您已阅读此文档多次，但它实际上并未涵盖您的所有问题？ 也许其他人也有同样的感受：在 Stack Overflow 上联系他们。

转到 Stack Overflow
发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！ 我们希望您将成为我们开源社区的长期参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

转到 GitHub