首页
所有分类
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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
一个不错的仿携程自定义数据下拉选择select
Sep 01 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
jquery实现拖动效果
Aug 10 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
mt-swipe(1) 面向对象(3) 远程桌面(2) REST(1) Mint UI(1) cmd(1) 相对路径(1) 相对路径 (1) exists(2) 慢日志(1)
You might like
PHP注释实例技巧
2008/10/03 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Oroton中国官网：澳洲知名奢侈配饰品牌
2017/03/26 全球购物
客服服务心得体会
2013/12/30 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
教导处工作制度
2014/01/18 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
公务员年终个人总结
2015/02/12 职场文书
奖金申请报告模板
2015/05/15 职场文书
李强优秀员工观后感
2015/06/16 职场文书
高一军训感想
2015/08/07 职场文书
Python数据类型最全知识总结
2021/05/31 Python