参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse

http://www.w3resource.com/twitter-bootstrap/collapse.php

总共有2种方法 一种是使用元素中对class属性加值  另一种则是使用js

如果是想要很标准的那种效果 就用第一种  如果是需要一些个性化需求  比如全部展开 关闭等 就用js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8" />
  5.  
  6.   <link href="../css/bootstrap.css" rel="stylesheet">
  7.   <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
  8.   <script src="../js/bootstrap.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11.  
  12.   <!-- 每个a标签的data-toggle="collapse" 属性 相当于触发器 -->
  13.   <div class="accordion" id="accordion2">
  14.     <!-- 这里有三组类似于android的卡片的东东 在class="accordion-group"的div中 -->
  15.     <div class="accordion-group">
  16.       <div class="accordion-heading">  <!-- 抽屉头  也就是抽屉标题  -->
  17.         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne">
  18.           Collapsible Group Item #1
  19.         </a>
  20.       </div>
  21.  
  22.       <!-- 抽屉内容 也就是要展开的部分 -->
  23.       <!--class中写in  表示默认是展开状态 再次点击标题就是收缩抽屉 -->
  24.       <!-- 但是class写为了in  并不表示显示的状态就是打开状态  只是后台认为抽屉打开了 所以默认就是打开状态的话 还需要加上height auto属性  -->
  25.       <!-- class中一定要有 collapse属性  否则抽屉的内容未打开都会显示 -->
  26.       <div id="collapseOne" class="collapse in" style="height: auto;">
  27.         <div class="accordion-inner">
  28.           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haveollan't heard of them accusamus labore sustainable VHS.
  29.         </div>
  30.       </div>
  31.     </div>
  32.  
  33.     <!-- 第2组 -->
  34.     <div class="accordion-group">
  35.       <div class="accordion-heading">
  36.         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
  37.           Collapsible Group Item #2
  38.         </a>
  39.       </div>
  40.       <div id="collapseTwo" class="collapse" style="height: 0px;">
  41.         <div class="accordion-inner">
  42.           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  43.         </div>
  44.       </div>
  45.     </div>
  46.  
  47.     <!-- 第3组 -->
  48.     <div class="accordion-group">
  49.       <div class="accordion-heading">
  50.         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree">
  51.           Collapsible Group Item #3
  52.         </a>
  53.       </div>
  54.       <div id="collapseThree" class=" collapse" style="height: 0px;">
  55.         <div class="accordion-inner">
  56.           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
  57.         </div>
  58.       </div>
  59.     </div>
  60.   </div>
  61.  
  62.   <p></p>
  63.   <p></p>
  64.   <p></p>
  65.   <p></p>
  66.  
  67.   <div class="accordion" id="accordion1">
  68.   <div class="accordion-group">
  69.     <div class="accordion-heading">
  70.       <a class="accordion-toggle" id="colOne">
  71.         Collapsible Group Item #1
  72.       </a>
  73.     </div>
  74.     <div id="collapse1" class="collapse" >
  75.       <div class="accordion-inner">
  76.         Anim pariatur cliche...
  77.       </div>
  78.     </div>
  79.   </div>
  80.   <div class="accordion-group">
  81.     <div class="accordion-heading">
  82.       <a class="accordion-toggle"  id="colTwo">
  83.         Collapsible Group Item #2
  84.       </a>
  85.     </div>
  86.     <div id="collapse2" class="collapse">
  87.       <div class="accordion-inner">
  88.         Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...Anim pariatur cliche...
  89.       </div>
  90.     </div>
  91.   </div>
  92. </div> 
  93.  
  94. <script type="text/javascript">
  95. $(function(){
  96.   $("#colOne").click(function(){
  97.        $('#collapse1').collapse('toggle');//全部收缩
  98.   });
  99.   $("#colTwo").click(function(){
  100.        $('#collapse2').collapse('toggle');//全部收缩
  101.   });
  102.  
  103. });
  104.  
  105. </script>
  106.  
  107. </body>
  108. </html>

Bootstrap Collapse使用的更多相关文章

  1. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  2. bootstrap collapse MVC .net漂亮的折叠List

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta na ...

  3. bootstrap collapse 无法收回

    $(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $ ...

  4. Bootstrap源码分析之nav、collapse

    导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是 ...

  5. [Bootstrap] 8. 'Collapse', data-target, data-toggle & data-parent

    Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following ...

  6. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  7. bootrap 手风琴Collapse源码分析

    /* ======================================================================== * Bootstrap: collapse.js ...

  8. yii2 利用小部件生成后台左边菜单栏

    ************   模型层递归查询权限   ************ /**     * 递归方式查询权限     */    public function getPrivilege()  ...

  9. Gruntfile.js模板

    module.exports = function(grunt) { // 配置项 var AppConfig = { name: 'app', //源文件目录 src: 'app/src', //生 ...

随机推荐

  1. Android的应用程序的异常处理2

    1.自定义一个类(MaApp)继承Application 2.在清单文件中的Application选项菜单对应的name属性中添加MyApp 3.重写application中的onCreate方法 4 ...

  2. prototype演变

    setp1 var Person = function () {}; //构造器 var p = new Person(); setp1 演变: var Person = function () {} ...

  3. nodejs在服务器上运行

     nodejs运行之后,关掉链接,网站运行就会断开,需要安装forever,后台执行. 安装方法如下(在windows和Linux下都能运行)://forever的安装: npm install fo ...

  4. Spring MVC详细示例实战教程【转】

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...

  5. tomcat中开启的对SSL(https)的支持

    打开conf/server.xml会发现有下面一段配置被注释着: <!-- <Connector port="8443" protocol="HTTP/1.1 ...

  6. BZOJ 3870: Our happy ending( 状压dp )

    dp(i, s)表示考虑了前i个数后, 能取到的数的集合为s时的方案数.对于1~min(L, K)枚举更新, 剩下的直接乘就好了. 复杂度O(T*K*2^N)...好像有点大, 但是可以AC.... ...

  7. linux杂记（十）what is BASH Shell

    first,what is shell?其实只要是碰过计算机的,对于OS(Operation System操作系统,不管是linux.unix.windows)有点概念的人大多都听过这个名词,因为只要 ...

  8. jQuery数据缓存data(name, value)详解及实现

    一. jQuery数据缓存的作用 jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”.如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有 ...

  9. CSS3 Media Query

    在移动端火爆的今日,一个好的web应用不仅仅要有对应移动平台的APP,自己web网页也需要对不同屏幕大小的移动设备进行支持,也就是我们所说的响应式web页面. 本篇文章就来介绍下最常见的响应式页面的实 ...

  10. SQL 时间戳

    一直对时间戳这个概念比较模糊,相信有很多朋友也都会误认为:时间戳是一个时间字段,每次增加数据时,填入当前的时间值.其实这误导了很多朋友. 1.基本概念 时间戳:数据库中自动生成的唯一二进制数字,与时间 ...