Bootstrap 折叠(Collapse)插件用法实例详解


Posted in Javascript onJune 01, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧!

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

如果您想要单独引用该插件的功能,那么您需要引用 collapse.js。同时,也需要在您的 Bootstrap 版本中引用 Transition(过渡)插件。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

您可以使用折叠(Collapse)插件:

创建可折叠的分组或折叠面板(accordion),如下所示:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 折叠面板</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne">
点击我进行展开,再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo">
点击我进行展开,再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree">
点击我进行展开,再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo.
</div>
</div>
</div>
</div>
</body>
</html>

结果如下所示:

Bootstrap 折叠(Collapse)插件用法实例详解

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

href data-target 属性添加到父组件,它的值是子组件的 id。

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

创建不带 accordion 标记的简单的可折叠组件(collapsible),如下所示:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 简单的可折叠组件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse" 
data-target="#demo">
简单的可折叠组件
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
vice lomo.
</div>
</body>
</html>

结果如下所示:

Bootstrap 折叠(Collapse)插件用法实例详解

正如您在实例中看到的,我们创建了一个可折叠的组件,与折叠面板(accordion)不同,我们没有添加属性 data-parent。

用法

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

Bootstrap 折叠(Collapse)插件用法实例详解

您可以通过以下两种方式使用折叠(Collapse)插件:

通过 data 属性:向元素添加 data-toggle="collapse" 和 data-target,自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器,并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的,请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理,请添加 data 属性 data-parent="#selector"。

通过 JavaScript:可通过 JavaScript 激活 collapse 方法,如下所示:

$('.collapse').collapse()

选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项:

Bootstrap 折叠(Collapse)插件用法实例详解

方法

下面是一些折叠(Collapse)插件中有用的方法:

Bootstrap 折叠(Collapse)插件用法实例详解

实例

下面的实例演示了方法的用法:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 折叠(Collapse)插件方法</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseOne">
点击我进行展开,再次点击我进行折叠。第 1 部分--hide 方法
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseTwo">
点击我进行展开,再次点击我进行折叠。第 2 部分--show 方法
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseThree">
点击我进行展开,再次点击我进行折叠。第 3 部分--toggle 方法
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseFour">
点击我进行展开,再次点击我进行折叠。第 4 部分--options 方法
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred 
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice 
lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script> 
</body>
</html>

结果如下所示:

Bootstrap 折叠(Collapse)插件用法实例详解

事件

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

Bootstrap 折叠(Collapse)插件用法实例详解

实例

下面的实例演示了事件的用法:

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 折叠(Collapse)插件事件</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" 
href="#collapseexample">
点击我进行展开,再次点击我进行折叠。--shown 事件
</a>
</h4>
</div>
<div id="collapseexample" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
cred nesciunt sapiente ea proident. 
Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { 
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿,当您展开时会提示本警告');})
});
</script> 
</body>
</html>

结果如下所示:

Bootstrap 折叠(Collapse)插件用法实例详解

以上所述是小编给大家介绍的Bootstrap 折叠(Collapse)插件用法实例详解的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
jquery实现心算练习代码
Dec 06 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
《javascript少儿编程》location术语总结
May 27 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 #Javascript
JS未跨域操作iframe里的DOM
Jun 01 #Javascript
jQuery实现的简单分页示例
Jun 01 #Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 #Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 #Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 #Javascript
You might like
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
使用jQuery实现Web页面换肤功能的要点解析
2016/05/12 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
vue组件生命周期详解
2017/11/07 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
python在命令行下使用google翻译(带语音)
2014/01/16 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
详解Python3中yield生成器的用法
2015/08/20 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
Python程序暂停的正常处理方法
2019/11/07 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python 元组的使用方法
2020/06/09 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
小学生自我评价范例
2013/09/24 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python