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 相关文章推荐
简介alert()与console.log()的不同
Aug 26 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
第六章之辅组类与响应式工具
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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
两个开源的Php输出Excel文件类
2010/02/08 PHP
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
PHP关联链接常用代码
2012/11/05 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
javascript jQuery插件练习
2008/12/24 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
阿迪达斯新加坡官方网站:adidas新加坡
2019/12/06 全球购物
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
生物科学专业个人求职信范文
2013/12/05 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
中小学生学籍证明
2014/10/25 职场文书
应届生简历自我评价
2015/03/11 职场文书
mysql 获取时间方式
2022/03/20 MySQL