首页
所有分类
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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
Aug 12 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
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) Spring Data JPA(4) DHCP(2) systemctl(1) 池化技术(1) Ubuntu Server(6) 主题(1) JAVA(88) Repository接口(3) Android(19)
You might like
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
php遍历CSV类实例
2015/04/14 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
实现单层json按照key字母顺序排序的示例
2017/12/06 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
jQuery实现本地存储
2020/12/22 jQuery
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python实现图片处理和特征提取详解
2017/11/13 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
无需压缩软件，用python帮你操作压缩包
2020/08/17 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
新西兰最大的在线设计师眼镜店：SmartBuyGlasses新西兰
2017/10/20 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
运动会通讯稿150字
2014/02/15 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python