本文概述
- HTML代码示例
- HTML代码示例
- HTML代码示例
文章图片
有时我们会显示很多内容, 为了使网站看起来既漂亮又简短, 我们使用了可折叠的文本框。可折叠的文本框是标题和内容的组合, 通常只有标题可见, 但是当标题被击中时, 将显示内容。
设定：你必须在标题中导入amp-accordion组件才能使用此标记。
HTML代码示例
<
script async custom-element = "amp-accordion"
src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
<
/script>
【如何使用Google AMP amp手风琴创建比较手风琴（）】为了进行比较划分, 我们将简单地使用CSS进行比较划分。你可以使用以下代码：
HTML代码示例
<
style>
#content-head {
display: flex;
}.title {
width: 50%;
}.compare-data {
display: flex;
}.compare-value {
width: 50%;
border: 1px solid;
padding: 5px 18px;
display: flex;
}
<
/style>
例子：
HTML代码示例
<
!doctype html>
<
html amp>
<
head>
<
meta charset = "utf-8">
<
title>
Google AMP amp-accordion<
/title>
<
!-- Important scripts and links
to be imported -->
<
script async src =
"https://cdn.ampproject.org/v0.js">
<
/script>
<
script async custom-element = "amp-list"
src = "https://cdn.ampproject.org/v0/amp-list-0.1.js">
<
/script>
<
script async custom-template = "amp-mustache"
src = "https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
<
/script>
<
script async custom-element = "amp-accordion"
src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
<
/script>
<
link rel = "canonical" href =
"https://amp.dev/documentation/examples/components/amp-accordion/index.html">
<
meta name = "viewport" content =
"width=device-width, minimum-scale=1, initial-scale=1">
<
style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
}@-webkit-keyframes -amp-start {
from {
visibility: hidden
}to {
visibility: visible
}
}@-moz-keyframes -amp-start {
from {
visibility: hidden
}to {
visibility: visible
}
}@-ms-keyframes -amp-start {
from {
visibility: hidden
}to {
visibility: visible
}
}@-o-keyframes -amp-start {
from {
visibility: hidden
}to {
visibility: visible
}
}@keyframes -amp-start {
from {
visibility: hidden
}to {
visibility: visible
}
}
<
/style>
<
noscript>
<
style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
<
/style>
<
/noscript>
<
!-- Custom CSS -->
<
style amp-custom>
amp-accordion section[expanded] .show-more {
display: none;
}amp-accordion section:not([expanded]) .show-less {
display: none;
}amp-accordion.hidden-header section[expanded] h4 {
border: none;
}#content-head {
display: flex;
}.fruit-title {
width: 50%;
}.comp-data {
display: flex;
}.comp-value {
width: 50%;
border: 1px solid;
padding: 5px 18px;
display: flex;
}h1, h4 {
color: forestgreen;
}section {
color: crimson;
}
<
/style>
<
meta name = "robots" content = "noindex, nofollow">
<
/head>
<
body>
<
center>
<
h1>
Geeks For Geeks
<
/h1>
<
/center>
<
div>
<
amp-list src =
"http://www.srcmini.com/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 =
"http://www.srcmini.com/{{primaryFruit.imageURL}}"
width = "50" height = "50">
<
/amp-img>
<
/div>
<
div class = "fruit-title">
{{#competitorFruit}}<
p>
{{subType}} {{fruit}}
<
/p>
<
amp-img src = "http://www.srcmini.com/{{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]">
<
span>
<
h1>
{{headingName}}<
/h1>
<
/span>
<
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>
<
/div>
<
/body>
<
/html>
输出如下：
文章图片
