文章参考
http://v3.bootcss.com/javascript/#collapse-example-accordion
隐藏样式: .collapse hides content
效果样式: .collapsing is applied during transitions
关闭样式: .collapse.in shows content
测试代码:
<div class="collapse" id="collapseExample">
<div class="well">
dsafdsafdsafdsafdsaf
</div>
</div>
备注:
1、如果class="collapse in"则是展开内容
2、内容的样式 class="well"
链接 触发
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
备注:重点是href="#collapseExample"属性
按钮 触发
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
备注:重点是aria-controls="collapseExample"属性
例子:
<!------------------------collapse 显示List列表-------------------------------->
<div class="panel-group" role="tablist">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="collapseListGroupHeading1">
<h4 class="panel-title" id="-collapsible-list-group-">
<a class="" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1">
Collapsible list group
</a>
<a class="anchorjs-link" href="#-collapsible-list-group-"><span class="anchorjs-icon"></span></a></h4>
</div>
<div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
<ul class="list-group">
<li class="list-group-item">Bootply</li>
<li class="list-group-item">One itmus ac facilin</li>
<li class="list-group-item">Second eros</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
<!------------------------collapse分组-------------------------------->
<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 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">
Anim pariatur cliche reprehenderi
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" 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">
Anim pariatur cliche r
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" 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">
Anim pariatur cliche r
</div>
</div>
</div>
</div>
备注:.panel-body
和 .list-group
可以相互替换
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as indata-parent=""
.
parent | selector | false | If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) |
toggle | boolean | true | Toggles the collapsible element on invocation |
Methods
.collapse(options)
Activates your content as a collapsible element. Accepts an optional options object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Toggles a collapsible element to shown or hidden.
.collapse('show')
Shows a collapsible element.
.collapse('hide')
Hides a collapsible element.
Events
Bootstrap's collapse class exposes a few events for hooking into collapse functionality.
show.bs.collapse | This event fires immediately when the show instance method is called. |
shown.bs.collapse | This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete). |
hide.bs.collapse | This event is fired immediately when the hide method has been called. |
hidden.bs.collapse | This event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something…
})