编程 Javascript

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>

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

- Author -

YY小苹果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery validate.js表单验证的基本用法入门

May 13 Javascript

简单的Jquery全选功能

Nov 07 Javascript

从JQuery源码分析JavaScript函数的apply方法与call方法

Sep 25 Javascript

在JavaScript应用中使用RequireJS来实现延迟加载

Jul 01 Javascript

jquery简单实现网页层的展开与收缩效果

Aug 07 Javascript

很棒的vue弹窗组件

May 24 Javascript

详解Javascript中new()到底做了些什么？

Mar 29 Javascript

解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

Sep 27 Javascript

JavaScript检查数据中是否存在相同的元素（两种方法）

Oct 07 Javascript

微信小程序仿知乎实现评论留言功能

Nov 28 Javascript

layui2.0使用table+laypage实现真分页

Jul 27 Javascript

JSONObject与JSONArray使用方法解析

Sep 28 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调整gif动画图片尺寸示例代码分享

2013/12/05 PHP

php下Memcached入门实例解析

2015/01/05 PHP

PHP正则表达式处理函数(PCRE 函数)实例小结

2019/05/09 PHP

做网页的一些技巧（续）

2007/02/01 Javascript

Jquery 实现Tab效果思路是js思路

2010/03/02 Javascript

jQuery选择器的工作原理和优化分析

2011/07/25 Javascript

批量实现面向对象的实例代码

2013/07/01 Javascript

js对文章内容进行分页示例代码

2014/03/05 Javascript

对JavaScript的全文搜索实现相关度评分的功能的方法

2015/06/24 Javascript

jQuery实现点击水纹波动动画

2016/04/10 Javascript

jquery 遍历数组 each 方法详解

2016/05/25 Javascript

jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象

2016/06/20 Javascript

在点击div中的p时，如何阻止事件冒泡

2017/02/07 Javascript

js 实现获取name 相同的页面元素并循环遍历的方法

2017/02/14 Javascript

深入理解Angularjs中$http.post与$.post

2017/05/19 Javascript

angular2中Http请求原理与用法详解

2018/01/11 Javascript

详解用Node.js写一个简单的命令行工具

2018/03/01 Javascript

Postman的下载及安装教程详解

2018/10/16 Javascript

图片文字识别（OCR）插件Ocrad.js教程

2018/11/26 Javascript

详解Vue2 添加对scss的支持

2019/01/02 Javascript

微信小程序swiper禁止用户手动滑动代码实例

2019/08/23 Javascript

vue npm install 安装某个指定的版本操作

2020/08/11 Javascript

Django实现快速分页的方法实例

2017/10/22 Python

python删除服务器文件代码示例

2018/02/09 Python

Python numpy中矩阵的基本用法汇总

2019/02/12 Python

Django 请求Request的具体使用方法

2019/11/11 Python

使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解

2020/01/25 Python

python mysql 字段与关键字冲突的解决方式

2020/03/02 Python

利用CSS3的border-radius绘制太极及爱心图案示例

2016/05/17 HTML / CSS

会计岗位职责模板

2014/03/12 职场文书

财务人员担保书

2014/05/13 职场文书

党的群众路线剖析材料

2014/10/09 职场文书

台风停课通知

2015/04/24 职场文书

社区活动总结范文

2015/05/07 职场文书

海洋天堂观后感

2015/06/05 职场文书

Redis可视化客户端小结

2021/06/10 Redis