全面解析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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
node.js 模块和其下载资源的镜像设置的方法
Sep 06 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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
dedecms模版制作使用方法
2007/04/03 PHP
基于empty函数的判断详解
2013/06/17 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP chop()函数讲解
2019/02/11 PHP
php经典趣味算法实例代码
2020/01/21 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
vue.js表单验证插件(vee-validate)的使用教程详解
2019/05/23 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
vue设置一开始进入的页面教程
2019/10/28 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
关于青春的演讲稿
2014/05/05 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
医德医风自我评价2015
2015/03/03 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
生日寿星公答谢词
2015/09/29 职场文书
公司周年庆寄语
2019/06/21 职场文书
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript