前言

折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。
可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js

折叠（Collapse）

以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle="collapse"都是必需的。
单击下面的按钮以通过类更改显示和隐藏另一个元素：

• .collapse隐藏内容
• .collapsing在过渡期间应用
• .collapse.in显示内容

	
	
	
	
	




  
    href 关联id属性
  
  
    data-target 关联id属性
  


  

     这一段文本可以折叠，点击后也可以展示
  

实现效果，默认不展开

点击按钮后展开文本

如果想默认展开，可以通过 .collapse.in 属性控制

  

     这一段文本可以折叠，点击后也可以展示
  

多个折叠

只需向元素添加data-toggle="collapse"和 adata-target即可自动分配对可折叠元素的控制。
该data-target属性接受一个 CSS 选择器来应用折叠。确保将类添加collapse到可折叠元素。如果您希望它默认打开，请添加附加类in。

	
	
	
	
	




  

    

      

        
          折叠项 Item #1
        
      
    
    

      

         body 1 正文内容
      
    
  
  

    

      

        
          折叠项 Item #2
        
      
    
    

      

         正文内容2
      
    
  
  

    

      

        
          折叠项 #3
        
      
    
    

      

         正文内容 3
      
    
  

实现效果

通过 JavaScript

手动启用

$('.collapse').collapse()

.collapse(options) 将您的内容激活为可折叠元素。接受一个可选选项object。

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle') 将可折叠元素切换为显示或隐藏。在可折叠元素实际显示或隐藏之前（即在or事件发生之前）返回给调用者。 shown.bs.collapse, hidden.bs.collapse
.collapse('show') 显示可折叠元素。在可折叠元素实际显示之前（即在事件发生之前）返回给调用者。shown.bs.collapse`

.collapse('hide') 隐藏可折叠元素。在可折叠元素实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.collapse

Bootstrap 的折叠类公开了一些用于挂钩折叠功能的事件。

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})