您的位置：首页 > Web前端 > BootStrap

BootStrap-CSS样式_插件_折叠（Collapse）插件

2019-01-05 00:51 525 查看

折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。还可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

创建可折叠的分组或折叠面板

1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。

3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class

您可以通过以下两种方式使用折叠（Collapse）插件：

1. 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。
2. 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

[code]$('.collapse').collapse()

选项

[code]//Options:.collapse(options) :激活内容为可折叠元素。接受一个可选的 options 对象
$('#identifier').collapse ({
//toggle: true-折叠显示折叠组件 false- 展开显示折叠组件，默认展开
toggle: true
})
//Show: .collapse('show'):显示可折叠元素
$('#identifier').collapse ('show')
//Hide: .collapse('hide'):隐藏可折叠元素
$('#identifier').collapse ('hide')
//Toggle:.collapse('toggle') :切换显示/隐藏可折叠元素
$('#identifier').collapse ('toggle')

事件

下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用

[code]//show.bs.collapse:在调用 show 方法后触发该事件
$('#identifier').on('show.bs.coll apse', function () {
// 执行一些动作...
})
//shown.bs.collapse :当折叠元素对用户可见时触发该事件（将等 待 CSS 过渡效果完成）
$('#identifier').on('shown.bs.collapse', function () {
// 执行一些动作...
})
//hide.bs.collapse:当调用 hide 实例方法时立即触发该事件
$('#identifier').on('hide.bs.coll apse', function () {
// 执行一些动作...
})
//hidden.bs.collapse :当折叠元素对用户隐藏时触发该事件（将等 待 CSS 过渡效果完成
$('#identifier').on('hidden.bs.co llapse', function () {
// 执行一些动作...
})

代码实例

[code]<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>折叠（Collapse）插件 </title>
<!-- Bootstrap -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--
.col-xs-1:栅格布局
.col-xs-offset-1:栅格布局，向右移动一个单元格
.nav:导航元素
.nav-pills:呈现胶囊式导航菜单（Tab页）样式
.nav-stacked样式：导航设置为堆叠(垂直)效果
-->
<div class="container col-xs-1 col-xs-offset-1" style="padding-top:20px">
<ul class="nav nav-pills nav-stacked">
<li><button class="btn-show btn btn-success">show</button></li>
<li><button class="btn-hide btn btn-danger">hide</button></li>
<li><button class="btn-toggle btn btn-info">toggle</button></li>
</ul>
</div>
<!--
.panel:面板组件
.panel-title:面板标题
.panel-body:面板内容
data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上
href 或 data-target 属性添加到父组件，它的值是子组件的 id
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上
.collapse:隐藏内容
.collapse in:显示内容
.collapsing:当过渡效果开始时被添加，当过渡效果完成时被移除
-->
<div class="container col-xs-9" style="padding:20px">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">第一部分</a>
</h4>
</div>
<div id="collapseOne" class="collapse in">
<div class="panel-body">
<h4>第一部分</h4>
<strong>collapseOne</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-target="#collapseTwo" data-toggle="collapse" data-parent="#accordion">第二部分</a>
</h4>
</div>
<div id="collapseTwo" class="collapsing">
<div class="panel-body">
<h4>第二部分</h4>
<strong>collapseTwo</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-target="#collapseThree" data-toggle="collapse" data-parent="#accordion">第三部分</a>
</h4>
</div>
<div id="collapseThree" class="collapse in">
<div class="panel-body">
<h4>第三部分</h4>
<strong>collapseThree</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">第四部分</a>
</h4>
</div>
<div id="collapseFour" class="collapse in">
<div class="panel-body">
<h4>第四部分</h4>
<strong>collapseFour</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe reiciendis officiis fugiat nostrum officia suscipit aspernatur error minima amet temporibus, tempore ipsum vitae sit fuga, sint expedita tenetur. Nesciunt, quod.
</div>
</div>
</div>
</div>
</body>
<script>
$(function () { $('#collapseFour').collapse({
//toggle: true-折叠显示折叠组件 false- 展开显示折叠组件，默认展开
toggle: true
})});

$(function(){
//全部展开折叠组件
$(".btn-show").click(function(){
$("div[id*='collapse']").collapse("show");
})
//全部隐藏折叠组件
$(".btn-hide").click(function(){
$("div[id*='collapse']").collapse("hide");
})
//循环显示或隐藏折叠组件
$(".btn-toggle").click(function(){
$("div[id*='collapse']").collapse("toggle")
.on("show.bs.collapse",function(){
//JS折叠组件显示前执行事件
console.log("show.bs.collapse");
}).on("shown.bs.collapse",function(){
//JS折叠组件显示后执行事件
console.log("shown.bs.collapse")
}).on("hide.bs.collapse",function(){
//JS折叠组件隐藏后执行事件
console.log("hide.bs.collapse")
}).on("hidden.bs.collapse",function(){
//JS折叠组件隐藏后执行事件
console.log("hidden.bs.collapse")
})
})
})
</script>
</html>

显示效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航