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><div></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>
自定义样式
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>
隐藏标题
此示例在单击“显示更多”按钮后隐藏该按钮。
<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>
嵌套手风琴
您甚至可以嵌套多个手风琴。只需确保避免根据封闭的 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>
自动折叠手风琴
expand-single-section 属性强制手风琴在任何给定时间仅允许一个展开的部分。展开一个部分会导致任何其他打开的部分关闭。
第 1 部分
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。
第 2 部分
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。
第 3 部分
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" 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>
动画手风琴
animate 属性为手风琴部分的展开和折叠添加动画效果。
第 1 部分
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。
第 2 部分
第 3 部分
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" 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>
比较手风琴
这使用动态数据实现了一个比较/对比手风琴视图。
这里我们使用 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; }
{{primaryFruit.subType}} {{primaryFruit.fruit}}
{{subType}} {{fruit}}
{{headingName}}
{{rowLabel}}
<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>
如果本页的说明没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的具体用例。
转到 Stack Overflow 一个未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您对您特别关注的问题进行一次性贡献。
在 GitHub 上编辑示例-