首页
所有分类
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 相关文章推荐
JavaScript Title、alt提示（Tips）实现源码解读
Dec 12 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
浅谈javascript中return语句
Jul 15 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
解决JS无法调用Controller问题的方法
Dec 31 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
比较node.js和Deno
Apr 27 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
寄语(276) 感谢信(72) 制度(225) 接收函(23) 保证书(97) 倡议书(159) 答谢词(97) 证明书(326) 计划书(118) 评语(336)
You might like
Laravel最佳分割路由文件（routes.php）的方式
2016/08/04 PHP
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
基于JavaScript实现表格隔行换色
2020/05/08 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python retrying模块的使用方法详解
2019/09/25 Python
python的Jenkins接口调用方式
2020/05/12 Python
Python发送邮件实现基础解析
2020/08/14 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
C/C++程序员常见面试题二
2015/11/19 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
大专毕业生简历的自我评价
2013/10/20 职场文书
劳资人员岗位职责
2013/12/19 职场文书
家长评语大全
2014/01/22 职场文书
节约用水标语
2014/06/11 职场文书
市级三好学生评语
2014/12/29 职场文书
员工年终考核评语
2014/12/31 职场文书
龙门石窟导游词
2015/02/02 职场文书
贫困生证明范文
2015/06/16 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python