如何使用 Google AMP amp-accordion 创建嵌套手风琴？

介绍：

有时我们有很多内容要显示，为了使网站看起来漂亮而简短，我们会使用可折叠的文本框。可折叠文本框是标题和内容组合的划分，通常只有标题可见，但当它被点击时显示内容。

设置：

• 您必须在标题中导入 amp-accordion 组件才能使用此标签。

• 要制作嵌套的手风琴，请使用下面提到的代码：

  

    
      

        
Nested Section 1
        
content
      
      

        
Nested Section 2
        
content
      
    
  

例子：

    
        
        
      
        
      
        
        
        
            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;
                }
            }
        
        
            
                body {
                    -webkit-animation: none;
                    -moz-animation: none;
                    -ms-animation: none;
                    animation: none;
                }
            
        
  
        
            amp-accordion section[expanded] .show-more {
                display: none;
            }
  
            .nested-accordion h4 {
                font-size: 14px;
                background-color: #ddd;
            }
  
            amp-accordion.hidden-header section[expanded] h4 {
                border: none;
            }
  
            /* these styles are not
          required for the samples to work */
            :root {
                --space-2: 1rem;
                /* 16px */
            }
  
            amp-accordion.sample {
                margin: var(--space-2);
            }
  
            h1,
            h4 {
                color: forestgreen;
            }
            section {
                color: crimson;
            }
        
        
    
    
        
            
                Geeks For Geeks
            
        
        
            
                Section 1
                GeeksforGeeks is a Computer 
                  Science portal for geeks.
            
            
                Section 2
                
                    
                        Nested Section 2.1
                        GeeksforGeeks is a Computer
                          Science portal for geeks.
                          It contains well written, 
                          well thought and well explained 
                          computer science and programming 
                          articles, quizzes etc.
                    
                    
                        Nested Section 2.2
                        GeeksforGeeks is a Computer 
                          Science portal for geeks. It 
                          contains well written, well
                          thought and well explained 
                          computer science and programming 
                          articles, quizzes etc.
                    
                
            
        
    

输出：