版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zeping891103/article/details/79066406
折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。
折叠插件API如下
入参项:
(1)parent,属性data-parent(默认为false),如果提供了一个选择器,当可折叠项目显示时,指定父元素下的所有可折叠的元素将被关闭。
(2)toggle,属性data-toggle(默认为true),切换调用可折叠元素。
方法:
(1)options: .collapse(options),激活内容为可折叠元素。接受一个可选的 options 对象。如$('#identifier').collapse({toggle: false})
(2)toggle: .collapse('toggle'),切换显示/隐藏可折叠元素。
(3)show: .collapse('show'),显示可折叠元素。
(4)hide: .collapse('hide'),隐藏可折叠元素。
事件:
(1)show.bs.collapse,在调用 show 方法后触发该事件。
(2)shown.bs.collapse,当折叠元素对用户可见时触发该事件(将等待 CSS 过渡效果完成)。
(3)hide.bs.collapse,当调用 hide 实例方法时立即触发该事件。
(4)hidden.bs.collapse,当折叠元素对用户隐藏时触发该事件(将等待 CSS 过渡效果完成)。
折叠栏,演示代码:
<body>
<div class="container">
<h3>按钮式可折叠组件</h3>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">按钮式可折叠组件</button>
<div id="demo" class="collapse in" style="border: solid 1px black;">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
<br />
<br />
<br />
<h3>链接式可折叠组件</h3>
<div id="myPanelGroup" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseOne">面板1</a></h3>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
第1个面板
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseTwo">面板2</a></h3>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
第2个面板
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><a data-toggle="collapse" data-parent="#myPanelGroup" href="#collapseThree">面板3</a></h3>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
第3个面板
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//当这段脚本注释后,折叠栏则最多只能显示一栏内容
$(function() {
$('#collapseOne').collapse('show')
});
$(function() {
$('#collapseTwo').collapse({
toggle: false
})
});
$(function() {
$('#collapseThree').collapse('toggle')
});
事件
$('#collapseThree').on("shown.bs.collapse", function() {
console.log("shown");
});
</script>
效果图: