折叠插件与程序控制折叠

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