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，以便在手风琴中清晰地定义两个并排的比较框。
#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 上编辑示例-