bootstrap手风琴折叠示例代码分享


Posted in Javascript onMay 22, 2017

本文实例为大家分享了bootstrap手风琴的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <meta charset="utf-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 <title>XXX</title> 
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
 <link rel="stylesheet" href="css/main.css"> 
 <!--[if lt IE 9]> 
 <script src="lib/html5shiv/html5shiv.min.js"></script> 
 <script src="lib/respond/respond.min.js"></script> 
 <![endif]--> 
</head> 
<body style="margin: 200px;"> 
<!--基本实例--> 
<button class="btn btn-primary" data-toggle="collapse" data-target="#content"> 
 Bootstrap 
</button> 
<div class="collapse" id="content"> 
<!--<div class="collapse fade in" id="content">--> 
 <div class="well"> 
 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 
 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目 
 前,Bootstrap 最新版本为 3.0 。 
 </div> 
</div> 
<br> 
<br> 
<br> 
<!--1、折叠部分设置一个id 
 2、在被点击的连接处引入<a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 3、还是在被点击的连接处加入 date-toggle="collapse" 
 4、写完之后第一次不正常,所以需要在折叠部分写上 
 class=“collapse”(表示一开始隐藏)或者 “collapse in”(表示一开始展开) 
 --> 
<!--<div class="panel-group"><!?大容器?> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div class="panel-heading"><!?第一部分,被点击部分?> 
  <h4 class="panel-title"> 
  <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse">1号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseOne"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  1号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div class="panel-heading"><!?第一部分,被点击部分?> 
  <h4 class="panel-title"> 
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse">2号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseTwo"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  2号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!?这个表示第一个整块儿的?> 
 <div class="panel-heading"><!?第一部分,被点击部分?> 
  <h4 class="panel-title"> 
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse">3号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseThree"><!?第二部分,折叠部分?> 
  <div class="panel-body"> 
  3号内容 
  </div> 
 </div> 
 </div> 
 
</div>--> 
<br> 
<br> 
<br> 
<br> 
<!--点击某一展开,其他的都自动折叠 
 1、给大容器加一个id id="accordion" 
 2、给每一个被点击链接加上一个 data-parent="#accordion" 
--> 
<div class="panel-group" id="accordion"><!--大容器--> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div class="panel-heading"><!--第一部分,被点击部分--> 
  <h4 class="panel-title"> 
  <a href="#collapseOne" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">1号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseOne"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  1号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div class="panel-heading"><!--第一部分,被点击部分--> 
  <h4 class="panel-title"> 
  <a href="#collapseTwo" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">2号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseTwo"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  2号内容 
  </div> 
 </div> 
 </div> 
 
 <div class="panel panel-default"><!--这个表示第一个整块儿的--> 
 <div class="panel-heading"><!--第一部分,被点击部分--> 
  <h4 class="panel-title"> 
  <a href="#collapseThree" rel="external nofollow" rel="external nofollow" data-toggle="collapse" data-parent="#accordion">3号连接</a> 
  </h4> 
 </div> 
 <div class="panel-collapse collapse" id="collapseThree"><!--第二部分,折叠部分--> 
  <div class="panel-body"> 
  3号内容 
  </div> 
 </div> 
 </div> 
 
</div> 
<script src="lib/jquery/jquery.js"></script> 
<script src="lib/bootstrap/js/bootstrap.js"></script> 
<script src="js/main.js"></script> 
</body> 
 
</html>

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

Javascript 相关文章推荐
JavaScript实现表格点击排序的方法
May 11 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
移动端手指放大缩小插件与js源码
May 22 #Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 #jQuery
详解Angular路由 ng-route和ui-router的区别
May 22 #Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 #Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 #Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
You might like
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery常用操作小结
2014/07/21 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
python微信好友数据分析详解
2018/11/19 Python
Python跳出多重循环的方法示例
2019/07/03 Python
Python实现FTP文件传输的实例
2019/07/07 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
办公室内勤工作职责
2013/12/11 职场文书
迎新晚会主持词
2014/03/24 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
《司马光》教学反思
2016/02/22 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
TV动画《间谍过家家》公开PV
2022/03/20 日漫
Java 数组的使用
2022/05/11 Java/Android