折叠插件与程序控制折叠

data-toggle="collapse" //以折叠事件触发

data-target="#id"; //要折叠的id

data-parent="折叠组的id"; //同一个折叠组中只能显示一个折叠内容

.collapse  //表示默认折叠内容不显示

.collapse in  //表示默认折叠内容显示

 

//用事件触发折叠

　　//显示

　　$("#点击的id").click(function(){
　　　　$("#事件的id").collapse("show")  
　　})

　　//不显示

　　$("#点击的id").click(function(){
　　　　$("#事件的id").collapse("hide")  
　　})

　　//切换

　　$("#点击的id").click(function(){
　　　　$("#事件的id").collapse("toggle")  
　　})

 

//折叠事件后的触发事件

　　//事件处理
　　　　$("#内容id").on('show.bs.collapse',function(){
　　　　　　alert("内容后显示出来")
　　　　})

　　　　$("#内容id").on('shown.bs.collapse',function(){
　　　　　　alert("内容先显示出来")
　　　　})

　　　　$("#内容id").on('hide.bs.collapse',function(){
　　　　　　alert("内容后隐藏出来")
　　　　})

　　　　$("#内容id").on('hiden.bs.collapse',function(){
　　　　　　alert("内容先隐藏出来")
　　　　})

转载于:https://www.cnblogs.com/gqx-html/p/6110886.html