全面解析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批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
利用JS实现数字增长
Jul 28 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
Django使用多数据库的方法
Sep 06 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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数据采集的详解
2013/06/02 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
2010/06/19 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
JavaScript canvas实现跟随鼠标事件
2020/02/10 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
微信小程序轮播图swiper代码详解
2020/12/01 Javascript
python通过函数属性实现全局变量的方法
2015/05/16 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
Tensorflow累加的实现案例
2020/02/05 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
《狼》教学反思
2014/03/02 职场文书
生产车间标语
2014/06/11 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
教师师德表现自我评价
2015/03/05 职场文书
总经理聘用协议书
2015/09/21 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers