bootstrap之collapse(折叠)

说这个之前我们可以看看bootstrap的官网对它的说明:http://v3.bootcss.com/javascript/#collapse

class为以下值时:

.collapse hides content.collapsing is applied during transitions.collapse.in shows content

You can use a link with the href attribute, or a button with thedata-target attribute. In both cases, the data-toggle="collapse" is required.

翻译下就是a标签用href,button标签用data-target来指定哪个折叠板id

看个简单的例子:

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href </a> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Button with data-target </button> <div class="collapse" id="collapseExample"> 这是折叠的内容 </div>很好理解吧,就是点下按钮,会显示出折叠的内容,其中

data-toggle="collapse"就是给这个按钮绑定事件,

<a href="#collapseExample" role="button" class="btn btn-primary" data-toggle="collapse">Link with href</a>

在bootstrap 的 js 加载的时候他会【检索】到 属性中有 data-toggle 这样的标签。然后 会【绑定】事件到 这个标签的  href="" 属性的值，也就是 #collapseExample

就相当于在jquery 中写了这样一段代码

document.ready(function (){

     

  //btn 这个对象是 有【触发】 弹出对话框的 对象

   $("btn").click(function (){

      //显示折叠面板

     $(#collapseExample).toggle();

   });

})

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

经典使用:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> 第一个内容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> 第二个内容 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> 第三个内容 </div> </div> </div> </div> 效果图:

NO.1

NO.2

N0.3

很简单吧,多实践就好