AMP嵌套手風琴添加文本

我想在嵌套手風琴節的頂部，後續添加一些文字：AMP嵌套手風琴添加文本

<amp-accordion disable-session-states> 
    <section> 
    <h4>Section 1</h4> 
    <p>Bunch of content.</p> 
    </section> 
    <section> 
    <h4>Section 2</h4> 
    <amp-accordion class="nested-accordion"> ADD TEXT HERE 
     <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>

問題是，我試圖改變由H1的顏色/字體大小，手風琴不管用。請幫忙！

來源

2017-04-21 Joe Lam

變化的H4 –

顏色不H4 –

試試這個

<!doctype html> 
<html amp lang="en"> 
<head> 
<meta charset="utf-8"> 
<script async src="https://cdn.ampproject.org/v0.js"></script> 
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script> 
<title>Hello, AMPs</title> 
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" /> 
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> 
<script type="application/ld+json"> 
     { 
     "@context": "http://schema.org", 
     "@type": "NewsArticle", 
     "headline": "Open-source framework for publishing content", 
     "datePublished": "2015-10-07T12:02:41Z", 
     "image": [ 
      "logo.jpg" 
     ] 
     } 
    </script> 
<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> 
<style amp-custom> 
amp-accordion section[expanded] .show-more { 
    display: none; 
} 
amp-accordion section:not([expanded]) .show-less { 
    display: none; 
} 
.nested-accordion { color:#F32225; } 
.nested-accordion h4 { 
    font-size: 14px; 
    background-color: #ddd; 
    color:#000; 
} 
.nested-accordion p { color:#000; } 
amp-accordion#hidden-header section[expanded] h4 { 
    border: none; 
} 
</style> 
</head> 
<body> 
<div class="wrapper"> 
    <h4>Welcome to the mobile web</h4> 
    <amp-accordion disable-session-states> 
    <section> 
    <h4>Section 1</h4> 
    <p>Bunch of content.</p> 
    </section> 
    <section> 
    <h4>Section 2</h4> 
    <amp-accordion class="nested-accordion"> ADD TEXT HERE 
     <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> 
</div> 
</body> 
</html>

來源

2017-04-21 07:39:40

THANK YOU 「在這裏添加文本」！工作！ –

AMP嵌套手風琴添加文本

回答

相關問題