首页
所有分类
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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
bootstrap响应式导航条模板使用详解（含下拉菜单，弹出框）
Nov 17 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
vue开发chrome插件，实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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
FuzzyWuzzy(1) 人工智能(2) 模糊匹配(1) 井字棋(1) 图像处理(1) 五子棋(12) Pyecharts(7) 模型保存加载(1) PyTorch(1) 计算器(5)
You might like
php adodb连接带密码access数据库实例，测试成功
2008/05/14 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
php处理静态页面：页面设置缓存时间实例
2017/06/22 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PDO::query讲解
2019/01/29 PHP
一个Action如何调用两个不同的方法
2014/05/22 Javascript
jQuery支持添加事件的日历特效代码分享（3种样式）
2015/08/24 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
温故知新——JavaScript中的字符串连接问题最全总结（推荐）
2017/08/21 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
2018/10/12 Javascript
js实现筛选功能
2020/11/24 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现发送邮件功能代码
2017/12/14 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
python模块常用用法实例详解
2019/10/17 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
AJAX的全称是什么
2012/11/06 面试题
竞聘副主任科员演讲稿
2014/01/11 职场文书
应届毕业生求职信
2014/05/26 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
高考满分作文赏析（2篇）
2019/08/12 职场文书
坚持不是死撑，更重要的是心态
2019/08/19 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
mysql 子查询的使用
2022/04/28 MySQL