基础 CSS 折叠标签

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

选项卡是有助于在单个容器中导航多个文档而无需离开页面的组件。 Foundation CSS 中有各种类型的选项卡变体，例如水平选项卡、垂直选项卡和折叠选项卡。在本文中，我们将了解 Foundation CSS 中的折叠标签。

折叠选项卡变体使选项卡在单击时折叠（如果它是打开的）。要在 Foundation CSS 中创建折叠标签，我们使用data-active-collapse属性，其值设置为true 。默认情况下， data-active-collapse属性的值设置为false 。

基础 CSS 折叠标签属性：

• data-active-collapse：此属性允许单击时折叠选项卡。它接受布尔值，默认值为false 。如果设置为 true，则单击它会使选项卡折叠。

句法：

    
 ... 


    

         ...
    

示例 1：这是一个基本示例，说明了使用 Foundation CSS 制作的水平折叠选项卡。

HTML

  

      
    
    
      
    
    
    
    
    

  

    
        
            GeeksforGeeks
         
        Foundation CSS Tabs
         
        
    
         
            Tab1 
        
         
            Tab2 
        
         
            Tab3 
        
         
            Tab4 
        
    
    
        
            GeeksforGeeks
        
         
            
        
        
            This is tab 3
   
           
        
         
           
        
    
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

输出：

基础 CSS 水平折叠标签

示例 2：这是一个基本示例，说明了使用 Foundation CSS 制作的垂直折叠选项卡。

HTML

  

      
    
    
      
    
    
    
    
    

  

    
        
            GeeksforGeeks
         
        Foundation CSS Tabs
         
    
    
         
            Tab1 
        
         
            Tab2 
        
         
            Tab3 
        
         
            Tab4
        
    
    
        
            GeeksforGeeks 
        
         
            
        
        
            This is tab 3
   
             
        
         
            
        
    
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

输出：

基础 CSS 垂直折叠标签

参考： https ://get.foundation/sites/docs/tabs.html#collapsing-tabs