首页
所有分类
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 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
基于JavaScript短信验证码如何实现
Jan 24 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析
Mar 02 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
最新最全的手机号验证正则表达式
Feb 24 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
荷兰购物网站(99) 土耳其购物网站(10) 葡萄牙购物网站(13) 南非购物网站(8) 泰国购物网站(30) 瑞典购物网站(55) 阿联酋购物网站(26) 芬兰购物网站(10) 欧洲购物网站(15) 哥伦比亚购物网站(5)
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
15个小时----从修改程序到自己些程序
2006/10/09 PHP
PHP操作文件方法问答
2007/03/16 PHP
php魔术函数__call()用法实例分析
2015/02/13 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
[00:44]华丽开场！DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
Python translator使用实例
2008/09/06 Python
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
一个基于flask的web应用诞生 bootstrap框架美化（3）
2017/04/11 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
Python collections模块使用方法详解
2019/08/28 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python中threading开启关闭线程操作
2020/05/02 Python
python中常见错误及解决方法
2020/06/21 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
俄罗斯苹果优质经销商商店：iPort
2020/05/27 全球购物
2014年五一促销活动方案
2014/03/09 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
大学生村官个人对照检查材料（群众路线）
2014/09/26 职场文书
民主生活会剖析材料
2014/09/30 职场文书
漫画「请问您今天要来点兔子吗？」最新杂志彩页公开
2022/03/24 日漫
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers