编程 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 相关文章推荐

javascript学习笔记(二) js一些基本概念

Jun 18 Javascript

js中判断Object、Array、Function等引用类型对象是否相等

Aug 29 Javascript

限制textbox或textarea输入字符长度的JS代码

Oct 16 Javascript

一道常被人轻视的web前端常见面试题(JS)

Feb 15 Javascript

AngularJs concepts详解及示例代码

Sep 01 Javascript

Bootstrap CSS组件之输入框组

Dec 17 Javascript

js实现选项卡内容切换以及折叠和展开效果【推荐】

Jan 08 Javascript

JS变量及其作用域

Mar 29 Javascript

MUI顶部选项卡的用法(tab-top-webview-main)详解

Oct 08 Javascript

Vue基于NUXT的SSR详解

Oct 24 Javascript

使用electron制作满屏心特效的示例代码

Nov 27 Javascript

js实现石头剪刀布游戏

Oct 11 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一些常用的正则表达式字符的一些转换

2008/07/29 PHP

详解PHP内置访问资源的超时时间 time_out file_get_contents read_file

2013/06/03 PHP

php使用cookie保存用户登录的用户名实例

2015/01/26 PHP

CheckBox 如何实现全选？

2006/06/23 Javascript

Extjs Ext.MessageBox.confirm 确认对话框详解

2010/04/02 Javascript

JS函数this的用法实例分析

2015/02/05 Javascript

基于jQuery创建鼠标悬停效果的方法

2015/03/07 Javascript

JQuery实现可直接编辑的表格

2015/04/16 Javascript

JavaScript节点及列表操作实例小结

2015/08/05 Javascript

跟我学习javascript的垃圾回收机制与内存管理

2015/11/23 Javascript

JQuery点击事件回到页面顶部效果的实现代码

2016/05/24 Javascript

解决微信浏览器Javascript无法使用window.location.reload()刷新页面

2016/06/21 Javascript

jQuery实现的tab标签切换效果示例

2016/09/05 Javascript

Javascript农历与公历相互转换的简单实例

2016/10/09 Javascript

JavaScript队列、优先队列与循环队列

2016/11/14 Javascript

详解Angular.js指令中scope类型的几种特殊情况

2017/02/21 Javascript

JavaScript中创建对象的7种模式详解

2017/02/21 Javascript

vue动态生成dom并且自动绑定事件

2017/04/19 Javascript

webpack之devtool详解

2018/02/10 Javascript

vue mvvm数据响应实现

2020/11/11 Javascript

vue监听滚动事件的方法

2020/12/21 Vue.js

[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9

2014/06/26 DOTA

[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

python读取配置文件方式(ini、yaml、xml)

2020/04/09 Python

python获取命令行参数实例方法讲解

2020/11/02 Python

买卖车协议书

2014/04/21 职场文书

槐乡的孩子教学反思

2014/04/27 职场文书

群众路线个人剖析材料及整改措施

2014/11/04 职场文书

清洁工岗位职责

2015/02/13 职场文书

药品开票员岗位职责

2015/04/15 职场文书

房地产项目合作意向书

2015/05/08 职场文书

公司趣味运动会开幕词

2016/03/04 职场文书

利用Python+OpenCV三步去除水印

2021/05/28 Python

Python多线程 Queue 模块常见用法

2021/07/04 Python

mysql 获取时间方式

2022/03/20 MySQL

redis 解决库存并发问题实现数量控制

2022/04/08 Redis