说这个之前我们可以看看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
很简单吧,多实践就好