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获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 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
thinkPHP实现签到功能的方法
2017/03/15 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
vue-cli2.9.3 详细教程
2018/04/23 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
socket + select 完成伪并发操作的实例
2017/08/15 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
详解爬虫被封的问题
2019/04/23 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
python读写文件write和flush的实现方式
2020/02/21 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
中文专业毕业生自荐信
2013/10/28 职场文书
投资协议书范本
2014/04/21 职场文书
村居抓节水倡议书
2014/05/19 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
先进党支部申报材料
2014/12/24 职场文书
雨花台导游词
2015/02/06 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python