Bootstrap折叠插件

Bootstrap Collapse插件有助于折叠网页内容并在整个应用程序中切换其可见性。该插件有助于划分页面内容并使其易于折叠，还支持许多内容选项，例如手风琴。

方法： Bootstrap提供了一些JavaScript函数作为属性，而折叠JavaScript插件附带了一个名为data- *的属性。

切换任何数据：

• data-toggle属性设置为在您的切换按钮中折叠。
• 数据目标设置为要切换的div的类或ID。
• 将div类设置为要切换的data-toggle = collapse ，以使数据最初不可见。

范例1：

HTML

  

    
  
    
  
    
    
  
    
    

  

    
        Bootstrap collapse plugin
        
            Collapsible
        
  
        
            This is a disappearing message
        
    

  

输出：

示例2：在手风琴中，您可能需要另一个名为data-parent的属性，如果显示其中一项，则该属性确保关闭给定父项下的所有可折叠元素。对于这种情况，请将data-parent属性设置为容器div的id或类。

的HTML

  

    
  
    
  
    
    
  
    
    

  

  
    
        Bootstrap collapse plugin
        
            
                
                    
                        
                            Collapsible Number 1
                        
                    
                
                
                    
                        This is the message of collapse1.
                    
                
            
            
                
                    
                        
                            Collapsible Number 2
                        
                    
                
                
                    
                        This is the message of collapse2.
                    
                
            
            
                
                    
                        
                            Collapsible Number 3
                        
                    
                
                
                    
                        This is the message of collapse3.
                    
                
            
        
    
  

  

输出：