编程 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实现有效时间的控制,并显示将要过期的时间

Jan 02 Javascript

node.js中的emitter.emit方法使用说明

Dec 10 Javascript

jquery append 动态添加的元素事件on 不起作用的解决方案

Jul 30 Javascript

理解javascript闭包

Dec 15 Javascript

JavaScript判断微信浏览器实例代码

Jun 13 Javascript

结合Vue控制字符和字节的显示个数的示例

May 17 Javascript

Vue表单输入绑定的示例代码

Nov 01 Javascript

基于vue的验证码组件的示例代码

Jan 22 Javascript

解决layui轮播图有数据不显示的情况

Sep 16 Javascript

layer弹出层取消遮罩的方法

Sep 25 Javascript

JS使用正则表达式提交页面验证的代码

Oct 16 Javascript

基于better-scroll 实现歌词联动功能的代码

May 07 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

动态新闻发布的实现及其技巧

2006/10/09 PHP

php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子

2014/04/24 PHP

PHP图片处理之使用imagecopy函数添加图片水印实例

2014/11/19 PHP

Laravel 5 框架入门（四）完结篇

2015/04/09 PHP

为你总结一些php系统类函数

2015/10/21 PHP

PHP创建多级目录的两种方法

2016/10/28 PHP

Laravel Eloquent分表方法并使用模型关联的实现

2019/11/25 PHP

PHP连接SQL server数据库测试脚本运行实例

2020/08/24 PHP

javascript返回顶部效果(自写代码)

2013/01/06 Javascript

取得元素的左和上偏移量的方法

2014/09/17 Javascript

jQuery解析与处理服务器端返回xml格式数据的方法详解

2016/07/04 Javascript

js HTML5多图片上传及预览实例解析（不含前端的文件分割）

2016/08/26 Javascript

js实现碰撞检测特效代码分享

2016/10/16 Javascript

基于AngularJS前端云组件最佳实践

2016/10/20 Javascript

浅谈Angular中ngModel的$render

2016/10/24 Javascript

详解js树形控件—zTree使用总结

2016/12/28 Javascript

Vue2.0实现购物车功能

2017/06/05 Javascript

React-Native做一个文本输入框组件的实现代码

2017/08/10 Javascript

ionic使用angularjs表单验证（模板验证）

2018/12/12 Javascript

Vue 页面权限控制和登陆验证功能的实例代码

2019/06/20 Javascript

详解微信小程序中var、let、const用法与区别

2020/01/11 Javascript

Vue 技巧之控制父类的 slot

2020/02/24 Javascript

微信小程序实现音频文件播放进度的实例代码

2020/03/02 Javascript

python中二维阵列的变换实例

2014/10/09 Python

python删除列表中重复记录的方法

2015/04/28 Python

python读写二进制文件的方法

2015/05/09 Python

Python实现简单文本字符串处理的方法

2018/01/22 Python

python 用正则表达式筛选文本信息的实例

2018/06/05 Python

Python解析json时提示“string indices must be integers”问题解决方法

2019/07/31 Python

python实现在线翻译功能

2020/03/03 Python

详解如何修改python中字典的键和值

2020/09/29 Python

学习雷锋月活动总结

2014/07/03 职场文书

学年个人总结范文

2015/03/05 职场文书

优秀员工自荐书

2015/03/06 职场文书

Mysql数据库值的添加、修改、删除及清空操作实例

2021/06/20 MySQL

vue封装数字翻牌器

2022/04/20 Vue.js