bootstrap手风琴制作方法详解


Posted in Javascript onJanuary 11, 2017

手风琴(Collapse)效果展示

Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题,可以让其对应的内容显示或隐藏

<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>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

手风琴?手风琴结构

手风琴最关键的部分,就是每个标题对应有一个内容,在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构。

简单点就是一个触发器和一个折叠区:

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button>
<div id="demo" class="collapse in">折叠区</div>

手风琴?声明式触发手风琴(二)

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

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

每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,
你只需要在collapse基础上再追加 in 样式:

手风琴?声明式触发手风琴(三)

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

注意:在这个案例中不加入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>

☑ 使用 panel 的 panel-title 做为触元素,使用panel-body的父元素作为折叠区;
 ☑ 使用一个 panel-group 来包含多个 panel,从而实现手风琴效果;
 ☑ 每个 panel 里的触发元素都要指定data-parent属性;
 ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符;
 ☑ 触发元素需要指定 data-toggle,并且值为 collapse;
 ☑ 触发元素都要指定 data-target属性;
 ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中使用replaceAll()函数实现字符替换的方法
Dec 25 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
可恶的ie8提示缺少id未定义
Mar 20 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 #Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 #Javascript
js仿iphone秒表功能 计算平均数
Jan 11 #Javascript
jQuery实现限制文本框的输入长度
Jan 11 #Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 #Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 #Javascript
Angularjs中使用layDate日期控件示例
Jan 11 #Javascript
You might like
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
php文件下载处理方法分析
2015/04/22 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
js实现div的切换特效上一个下一个
2014/02/11 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
vue路由教程之静态路由
2019/09/03 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
35个Python编程小技巧
2014/04/01 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
分析python请求数据
2018/08/19 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
什么是索引指示器
2012/08/20 面试题
工程造价自荐信
2013/10/09 职场文书
函授自我鉴定
2013/11/06 职场文书
股权转让协议书范本
2014/04/12 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
检讨书格式
2015/05/07 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Python获取字典中某个key的value
2022/04/13 Python