首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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）插件用法实例详解的相关内容，希望对大家有所帮助！

Bootstrap 折叠（Collapse）插件用法实例详解

- Author -

yongbin668

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
PHP守护进程实例
Mar 06 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
Jul 27 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
选择器(1) flex-shrink(1) canvas(2) SQL注入(2) flex(1) 图片模糊(1) #{}(1) 代理(2) GNN(1) 外键(1)
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python的time模块中的常用方法整理
2015/06/18 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python操作列表的函数使用代码详解
2017/12/28 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
keras做CNN的训练误差loss的下降操作
2020/06/22 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
网上开商店的创业计划书
2014/01/19 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
组工干部对照检查材料
2014/08/25 职场文书
政风行风整改报告
2014/11/06 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python