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 相关文章推荐
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript小技巧整理篇(非常全)
Jan 26 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
JavaScript反弹动画效果的实现代码
Jul 13 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
第六章之辅组类与响应式工具
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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
window.showModalDialog使用手册
2007/01/11 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Random 在 Python 中的使用方法
2018/08/09 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
小班上学期评语
2014/05/05 职场文书
爱护公物标语
2014/06/24 职场文书
无房证明范本
2014/09/17 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2015年女职工工作总结
2015/05/15 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
Redis数据同步之redis shake的实现方法
2022/04/21 Redis