首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Bootstrap基本插件学习笔记之折叠(22)

Posted in Javascript onDecember 08, 2016

折叠（Collapse）插件可以很容易地让页面区域折叠起来。

0x01 例子

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>折叠插件</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>折叠插件</h1>
 </div>
 <div class="panel-group" id="panelGroup">
 <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
   折叠1
   </a>
  </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse in">
  <div class="panel-body">
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
  </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
   折叠2
   </a>
  </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
  </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
   折叠3
   </a>
  </h4>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
  </div>
  </div>
 </div>
 <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
   折叠4
   </a>
  </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse">
  <div class="panel-body">
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
  </div>
  </div>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之折叠(22)

这里有个新的属性：data-parent ，用于把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

0x02 JS方式

也可以通过JS代码来动态显示：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>JS代码</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>折叠插件</h1>
 </div>
 <div class="panel-group" id="panelGroup">
 <div class="panel panel-default">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse1" data-toggle="collapse" data-parent="#panelGroup">
   折叠1
   </a>
  </h4>
  </div>
  <div id="collapse1" class="panel-collapse collapse">
  <div class="panel-body">
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
  </div>
  </div>
 </div>
 <div class="panel panel-success">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse2" data-toggle="collapse" data-parent="#panelGroup">
   折叠2
   </a>
  </h4>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
  <div class="panel-body">
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
   内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2
  </div>
  </div>
 </div>
 <div class="panel panel-warning">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse3" data-toggle="collapse" data-parent="#panelGroup">
   折叠3
   </a>
  </h4>
  </div>
  <div id="collapse3" class="panel-collapse collapse">
  <div class="panel-body">
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
   内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3
  </div>
  </div>
 </div>
 <div class="panel panel-danger">
  <div class="panel-heading">
  <h4 class="panel-title">
   <a href="#collapse4" data-toggle="collapse" data-parent="#panelGroup">
   折叠4
   </a>
  </h4>
  </div>
  <div id="collapse4" class="panel-collapse collapse">
  <div class="panel-body">
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
   内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1
  </div>
  </div>
 </div>
 </div>
</div>
<script>
 $(function () {
 $("#collapse1").collapse({
  toggle:false
 });
 $("#collapse2").collapse({
  toggle:false
 });
 $("#collapse3").collapse({
  toggle:false
 });
 $("#collapse4").collapse({
  toggle:false
 });
 })
</script>
</body>
</html>

效果如下：

Bootstrap基本插件学习笔记之折叠(22)

初始全部是折叠状态，因为toggle初始化均为false。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

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

Bootstrap基本插件学习笔记之折叠(22)

- Author -

kikay

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

Javascript 相关文章推荐
用roll.js实现的图片自动滚动+鼠标触动的特效
Mar 18 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
12306验证码破解思路分享
Mar 25 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
Jan 04 Javascript
javascript事件处理模型实例说明
May 31 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
新手入门js闭包学习过程解析
Oct 08 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 #Javascript
JS生成和下载二维码的代码
Dec 07 #Javascript
获取select的value、text值的简单示例（jquery与javascript）
Dec 07 #Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 #Javascript
DropDownList实现可输入可选择（两种版本可选）
Dec 07 #Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 #Javascript
利用jquery实现验证输入的是否是数字、小数，包含保留几位小数
Dec 07 #Javascript
S-2000(1) 克隆(1) IC-R9500(1) 微信(2) 小喇叭开始广播了(1) 温控(1) 脏读(2) 增删查改(1) 外键(1) 小喇叭(1)
You might like
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
跟我学Laravel之安装Laravel
2014/10/15 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
JS对象与json字符串格式转换实例
2014/10/28 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
Java分治归并排序算法实例详解
2017/12/12 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python多进程并发demo实例解析
2019/12/13 Python
在tensorflow中设置保存checkpoint的最大数量实例
2020/01/21 Python
Python中SQLite如何使用
2020/05/27 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
美国领先的汽车轮胎和轮毂供应商：TireBuyer
2016/07/21 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
日语专业毕业生求职信
2013/12/04 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
婚前协议书范本
2014/04/15 职场文书
JavaScript流程控制（分支）
2021/12/06 Javascript
css3应用示例：新增的选择器
2022/03/16 HTML / CSS