首页
所有分类
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 相关文章推荐
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
如何做到打开一个页面，过几分钟自动转到另一页面
Apr 20 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
小程序实现搜索框
Jun 19 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
追加文本(1) Pytesseract(1) flex-shrink(1) SFTP(3) flex(1) 柱状图(1) GNN(1) 验证码(1) 匹配文本(1) 文字识别(1)
You might like
用PHP实现的生成静态HTML速度快类库
2007/03/31 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
详解js的六大数据类型
2016/12/27 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
从零开始学Python第八周：详解网络编程基础（socket)
2016/12/14 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python计算两个数的百分比方法
2018/06/29 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
python中os.remove()用法及注意事项
2021/01/31 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
Gap工厂店：Gap Factory
2017/11/02 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
保险专业自荐信范文
2014/02/20 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
流动人口婚育证明
2014/10/19 职场文书
会计工作总结范文2014
2014/12/23 职场文书
上级领导检查欢迎词
2015/09/30 职场文书