Foundation CSS 响应式手风琴标签

基础 CSS 是用于任何设备的响应式网站、应用程序和电子邮件的前端框架。它还有许多前端模板，如Bootstrap 、 Semantic UI 、 和其他前端框架。它灵活、易读且完全可定制。 Adobe、Amazon、Cisco、Hp、Mozilla、Samsung 等顶级科技巨头都在使用 Foundation CSS。在本文中，我们将使用 Foundation CSS 中的响应式手风琴选项卡构建一个简单的网页。

响应式手风琴选项卡：这些是基础 CSS 容器之一，用于响应式地在不同断点处的两个组件之间切换。在单击特定主题之前，标题或主题的内容将被隐藏。内容将显示为下拉框，其他主题内容将自动隐藏。它将响应地在选项卡和列表之间切换，反之亦然。

基础 CSS 响应式手风琴标签类：

• 手风琴：这个类用于将无序列表变成手风琴。
• 手风琴项：此类用于将列表项制作为手风琴项。
• 手风琴标题：此类用于设置各个手风琴项目的标题。
• 手风琴内容：该类用于显示其各自手风琴项下的内容。

Foundation CSS Responsive Accordion Tabs属性：

• data-responsive-accordion-tabs：此属性用于在网页大小更改时响应式地使手风琴从 Tabs 更改为 List。
• data-responsive-accordion-tabs：该属性用于分别在网页宽度变化时，使手风琴从 Tabs 到 List 和 List 到 Tabs 响应式变化。
• data-accordion-item：此属性用于在单击折叠项时显示内容。
• data-tab-content：该属性用于在点击折叠项时显示内容。

句法：

    

        
            // Accordion title
        
        

            // Accordion content
       
    

示例 1：在本示例中，当网页宽度较宽时，折叠式将作为选项卡列出，而当网页宽度较窄时，折叠式将作为列表列出。我们将使用data-responsive-accordion-tabs=”accordion large-tabs”。

输出：

Foundation CSS 响应式手风琴标签

例2：在本例中，当网页宽度较宽时，折叠式会被列为列表，宽度为中等时会被列为选项卡，当网页宽度较窄时，它会再次被列为列表。我们使用data-responsive-accordion-tabs=”accordion medium-tabs large-accordion” 。

HTML

  

    Foundation CSS Responsive Accordion Tabs
    
    
  
    
    
    
  
    
    
    

  

    GeeksforGeeks
    Foundation CSS Responsive Accordion Tabs
    
        
        
            
                
                    HTML
                
                
                    
                        HTML stands for HyperText Markup Language. 
                        It is used to design web pages using a markup
                        language. It is the combination of Hypertext 
                        and Markup language. Hypertext defines the link
                        between the web pages.
                    
  
                
            
            
                
                    CSS
                
                
                    CSS (Cascading Style Sheets) is a stylesheet language
                        used to design the webpage to make it attractive. The
                        reason for using this is to simplify the process of 
                        making web pages presentable. It allows you to apply 
                        styles to web pages. More importantly, it enables you
                        to do this independent of the HTML that makes up each
                        web page.
  
                
            
            
                
                    JavaScript
                
                
                    JavaScript is the world most popular lightweight,
                        interpreted compiled programming language. It
                        is also known as scripting language for web pages.
                        It is well-known for the development of web pages, 
                        many non-browser environments also use it. JavaScript
                        can be used for Client-side developments as well as
                        Server-side developments.
  
                
            
            
                
                    Bootstrap
                
                
                    Bootstrap is a free and open-source tool collection 
                        for creating responsive websites and web
                        applications. It is the most popular HTML, CSS, and
                        JavaScript framework for developing responsive,
                        mobile-first websites. Nowadays, the websites are 
                        perfect for all the browsers (IE, Firefox, and
                        Chrome) and for all sizes of screens (Desktop, Tablets,
                        Phablets, and Phones).
                    
  
                
            
            
                
                    Reactjs
                
                
                    React is a declarative, efficient, and flexible 
                        JavaScript library for building user interfaces.
                        It’s ‘V’ in MVC. ReactJS is an open-source, 
                        component-based front-end library responsible only
                        for the view layer of the application. It is 
                        maintained by Facebook.
  
                
            
        
    
    
        $(document).foundation();
    

  

输出：

Foundation CSS 响应式手风琴标签

参考： https ://get.foundation/sites/docs/accordion.html