全面解析Bootstrap手风琴效果


Posted in Javascript onApril 17, 2020

触发手风琴可以通过自定义的data-toggle 属性来触发。其中data-toggle值设置为 collapse,data-target="#折叠区标识符"。

第一步,设计一个面板组合,里面有三个折叠区:

<div class="panel-group" id="myAccordion">
 <div class="panel panel-accordion panel-default"></div>
 <div class="panel panel-accordion panel-default"></div>
 <div class="panel panel-accordion panel-default"></div>
</div>

第二步:给面板添加内容,每个面板包括两个部分,第一个是面板标题 panel-heading,并且在这里面添加标题 panel-title。第二个部分是面板内容,也就是折叠区,使用 panel-collapse 样式。

<div class="panel panel-accordion panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">标题一</h4>
 </div>
 <div class="panel-collapse">
 <div class="panel-body">折叠区内容...</div>
 </div>
</div>

第三步,为了把标题和内容区捆绑在一起,可以通过锚链接的方法,把标题区域和面板区连在一起:

<div class="panel-group" id="myAccordion">
 <div class="panel panel-accordion panel-default">
 <div class="panel-heading">
  <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
 </div>
 <div class="panel-collapse" id="panel1">
  <div class="panel-body">折叠区内容...</div>
 </div>
 </div>
 <div class="panel panel-accordion panel-default">
 <div class="panel-heading">
  <h4 class="panel-title"><a href="#panel2">标题二</a></h4>
 </div>
 <div class="panel-collapse" id="panel2">
  <div class="panel-body">折叠区内容...</div>
 </div>
 </div>
 ......
</div>

第四步,控制面板内容区是否可视。在Bootstrap框架中,如果你想让内容区域不可视,只需要在 panel-collapse 样式上添加 collapse

每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,需要怎么办?其实Bootstrap作者早就为大家做了这方面的考虑,你只需要在collapse基础上再追加 in 样式.

<div class="panel panel-accordion panel-default">
 <div class="panel-heading">
 <h4 class="panel-title"><a href="#panel1">标题一</a></h4>
 </div>
 <div class="panel-collapse collapse" id="panel1">
 <div class="panel-body">折叠区内容...</div>
 </div>
</div>

第五步,激活手风琴交互行为。要完成交互行为,需要在标题链接中自定义两个属性,一个是data-toggle,并且取值为collapse;另一个是data-target,取值为各个面板内容区的标识符,比如说ID,在这个例子分别是#panel1、#panel2和#panel3

div class="panel panel-accordion panel-default">
 <div class="panel-heading">
 <h4 class="panel-title"><a href="#panel1" data-toggle="collapse" data-target="#panel1">标题一</a></h4>
 </div>
 <div class="panel-collapse collapse in" id="panel1">
 <div class="panel-body">折叠区内容...</div>
 </div>
</div>

注意:在这个案例中不加入data-target="#panel1"也可以,因为前面已经有了href="#panel1",但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。
第六步,定义data-parent属性,实现点击一个其中一个元素时,关闭所有的折叠区,再打开所单击的区域(如果所单击区域是展示的,则会关闭)。这个data-parent取值与手风琴面板容器的标识符相匹配,比如这个例子是指 #myAccordion:

<div class="panel-group" id="myAccordion">
 <div class="panel panel-accordion panel-default">
 <div class="panel-heading">
  <h4 class="panel-title">
  <a href="#panel1" data-toggle="collapse" data-target="#panel1" data-parent="#myAccordion">标题一</a>
  </h4>
 </div>
...
七

 七. 完整代码

<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">标题一</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 data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</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 data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
 </div>
 <div id="collapseThree" class="panel-collapse collapse">
  <div class="panel-body">标题三对应的内容</div>
 </div>
 </div>
</div>

效果图

全面解析Bootstrap手风琴效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是对Bootstrap手风琴效果的全面解析,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JS判断变量是否为空判断是否null
Jul 25 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
Vue父子组件传值的一些坑
Sep 16 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 #Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 #Javascript
浅析2种JavaScript继承方式
Dec 04 #Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
You might like
那些年一起学习的PHP(二)
2012/03/21 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
html下载本地
2006/06/19 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
js 实现 input type=&quot;file&quot; 文件上传示例代码
2013/08/07 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
js实现右键菜单功能
2016/11/28 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
浅析Python多线程下的变量问题
2015/04/28 Python
解决Python二维数组赋值问题
2019/11/28 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
django正续或者倒序查库实例
2020/05/19 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
Java程序员面试题
2013/07/15 面试题
房屋公证委托书
2014/04/03 职场文书
小学生环保倡议书
2014/05/15 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python