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 相关文章推荐
用cssText批量修改样式
Aug 29 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
页面使用密码保护代码
Apr 10 Javascript
js select option对象小结
Dec 20 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
JSONP跨域请求
Mar 02 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
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
一个改进的UBB类
2006/10/09 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
2017/06/23 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
[06:07]刀塔密之二:攻之吾命受之吾幸
2014/07/03 DOTA
Python 正则表达式入门(初级篇)
2016/12/07 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python修改列表值问题解决方案
2020/03/06 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
聚网科技C++面试笔试题
2015/09/01 面试题
精细化工应届生求职信
2013/11/17 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
最新最全的手机号验证正则表达式
2022/02/24 Javascript