全面解析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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
Jan 26 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
Vue中使用vux的配置详解
May 05 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php实现httpRequest的方法
2015/03/13 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
javascript模拟map输出与去除重复项的方法
2015/02/09 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
详解angular element()方法使用
2017/04/08 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
python计算时间差的方法
2015/05/20 Python
Python 专题一 函数的基础知识
2017/03/16 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python测试模块doctest使用解析
2019/08/10 Python
解决Django no such table: django_session的问题
2020/04/07 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
大学毕业生自荐书怎么写?
2014/01/06 职场文书
党的群众路线教育实践活动对照检查材料范文
2014/09/24 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android