srcmini本文概述
有时我们会显示很多内容, 为了使网站看起来既漂亮又简短, 我们使用了可折叠的文本框。可折叠的文本框是标题和内容的组合, 通常只有标题可见, 但是当标题被击中时, 将显示内容。
设定：你必须在标题中导入amp-accordion组件才能使用此标记。
HTML代码示例
<script async custom-element = "amp-accordion" src = "https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>为了进行比较划分, 我们将简单地使用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 = "/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]"> <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>输出如下：
评论前必须登录！
注册