Bootstrap每天必学之折叠(Collapse)插件


Posted in Javascript onApril 25, 2016

折叠(Collapse)插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项。
如果您想要单独引用该插件的功能,那么您需要引用 collapse.js,或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
一、用法
下表列出了折叠(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()

二、实例

通过点击可以折叠内容。
//基本实例

<button class="btn btn-primary" data-toggle="collapse"
data-target="#content">
 Bootstrap
</button>

<div class="collapse" id="content">
 <div class="well">
  Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由
  Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0 。
 </div>
</div>

//手风琴折叠

<div class="panel-group" id="accordion">
 <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="panel-collapse collapse in">
   <div class="panel-body">
    这里是第一部分。
   </div>
  </div>
 </div>

 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a href="#collapseTwo" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示,再点击我进行折叠,第二部分</a></h4>
  </div>
  <div id="collapseTwo" class="panel-collapse collapse">
   <div class="panel-body">
    这里是第二部分。
   </div>
  </div>
 </div>

 <div class="panel panel-default">
  <div class="panel-heading">
   <h4 class="panel-title"><a href="#collapseThree" data-toggle="collapse"
   data-parent="#accordion">点击我进行展示,再点击我进行折叠,第三部分</a></h4>
  </div>
  <div id="collapseThree" class="panel-collapse collapse">
   <div class="panel-body">
    这里是第三部分。
   </div>
  </div>
 </div>
</div>

Bootstrap每天必学之折叠(Collapse)插件

//手风琴效果

$('#collapseOne, #collapseTwo,#collapseThree, #collapseFour').collapse({
 parent : '#accordion',
 toggle : false,
});

//手动调用

$('button').on('click', function() {
 $('#collapseOne').collapse({
  toggle : true,
 });
});

//collapse 方法还提供了三个参数:hide、show、toggle。

$('#collapseOne').collapse('hide');
$('#collapseTwo').collapse('show');
$('button').on('click', function() {
 $('#collapseOne').collapse('toggle');
});

Collapse 插件中事件有四种。

Bootstrap每天必学之折叠(Collapse)插件

//事件,其他雷同

$('#collapseOne').on('show.bs.collapse', function() {
 alert('当 show 方法调用时触发');
});

希望本文对大家学习Bootstrap折叠(Collapse)插件有所帮助,和启发。

Javascript 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
javascript实现避免页面按钮重复提交
Jan 08 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
node.js 抓取代理ip实例代码
Apr 30 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
JavaScript实现的拼图算法分析
Feb 13 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
You might like
php 静态化实现代码
2009/03/20 PHP
php实现简单四则运算器
2020/11/29 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JS实现self的resend
2010/07/22 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JS对象是否拥有某属性如何判断
2017/02/03 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
对VUE中的对象添加属性
2018/09/18 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
谈谈如何手动释放Python的内存
2016/12/17 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
大学生就业自荐信
2013/10/26 职场文书
优秀员工自荐书范文
2013/12/08 职场文书
毕业生自荐信
2013/12/14 职场文书
领导视察欢迎词
2014/01/15 职场文书
师德建设实施方案
2014/03/21 职场文书
2014年防汛工作总结
2014/12/08 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
python识别围棋定位棋盘位置
2021/07/26 Python