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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8" />

  <link href="../css/bootstrap.css" rel="stylesheet">

  <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>

  <script src="../js/bootstrap.js" type="text/javascript"></script>

</head>

<body>

  <!-- 每个a标签的data-toggle="collapse" 属性 相当于触发器 -->

  <div class="accordion" id="accordion2">

    <!-- 这里有三组类似于android的卡片的东东 在class="accordion-group"的div中 -->

    <div class="accordion-group">

      <div class="accordion-heading">  <!-- 抽屉头  也就是抽屉标题  -->

        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseOne">

          Collapsible Group Item #1

        </a>

      </div>

      <!-- 抽屉内容 也就是要展开的部分 -->

      <!--class中写in  表示默认是展开状态 再次点击标题就是收缩抽屉 -->

      <!-- 但是class写为了in  并不表示显示的状态就是打开状态  只是后台认为抽屉打开了 所以默认就是打开状态的话 还需要加上height auto属性  -->

      <!-- class中一定要有 collapse属性  否则抽屉的内容未打开都会显示 -->

      <div id="collapseOne" class="collapse in" style="height: auto;">

        <div class="accordion-inner">

          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.

        </div>

      </div>

    </div>

    <!-- 第2组 -->

    <div class="accordion-group">

      <div class="accordion-heading">

        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">

          Collapsible Group Item #2

        </a>

      </div>

      <div id="collapseTwo" class="collapse" style="height: 0px;">

        <div class="accordion-inner">

          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.

        </div>

      </div>

    </div>

    <!-- 第3组 -->

    <div class="accordion-group">

      <div class="accordion-heading">

        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" data-target="#collapseThree">

          Collapsible Group Item #3

        </a>

      </div>

      <div id="collapseThree" class=" collapse" style="height: 0px;">

        <div class="accordion-inner">

          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.

        </div>

      </div>

    </div>

  </div>

  <p></p>

  <p></p>

  <p></p>

  <p></p>

  <div class="accordion" id="accordion1">

  <div class="accordion-group">

    <div class="accordion-heading">

      <a class="accordion-toggle" id="colOne">

        Collapsible Group Item #1

      </a>

    </div>

    <div id="collapse1" class="collapse" >

      <div class="accordion-inner">

        Anim pariatur cliche...

      </div>

    </div>

  </div>

  <div class="accordion-group">

    <div class="accordion-heading">

      <a class="accordion-toggle"  id="colTwo">

        Collapsible Group Item #2

      </a>

    </div>

    <div id="collapse2" class="collapse">

      <div class="accordion-inner">

        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...

      </div>

    </div>

  </div>

</div> 

<script type="text/javascript">

$(function(){

  $("#colOne").click(function(){

       $('#collapse1').collapse('toggle');//全部收缩

  });

  $("#colTwo").click(function(){

       $('#collapse2').collapse('toggle');//全部收缩

  });

});

</script>

</body>

</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. 初探swift语言的学习笔记(闭包－匿名函数或block块代码)

    使用Block的地方很多,其中传值只是其中的一小部分,下面介绍Block在两个界面之间的传值: 先说一下思想: 首先,创建两个视图控制器,在第一个视图控制器中创建一个UILabel和一个UIButto ...

  2. HDU 4914 Linear recursive sequence(矩阵乘法递推的优化)

    题解见X姐的论文 矩阵乘法递推的优化.仅仅是mark一下. .

  3. ring3 dll hide

    ZwQuerySystemInformation(SystemProcessInformation,SystemInformation,Length,ReturnLength);         pS ...

  4. codeforces 292E. Copying Data 线段树

    题目链接 给两个长度为n的数组, 两种操作. 第一种, 给出x, y, k, 将a[x, x+k-1]这一段复制到b[y, y+k-1]. 第二种, 给出x, 输出b[x]的值. 线段树区间更新单点查 ...

  5. 关于 rand() 函数返回值的值域的疑问

    <C语言参考手册>中关于 rand() 函数有如下描述. (1)rand() 函数的原型 int rand(void); (2)连续调用 rand 将返回 0 到 int 类型的最大可表示 ...

  6. e.currentTarget

    e.target总是指向点击的目标 e.currentTarget会指向这个点击标的冒泡对象 <div class="wrap"> wrap <div class ...

  7. 组合框里添加复选框的方法（使用勾选的假象，用图片代替而已，并非QT原生支持）

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

  8. 操作native window的QxtWindowSystem （好像是一个IM的一部分）

    http://libqxt.bitbucket.org/doc/0.6/qxtwindowsystem.html https://github.com/psi-plus/plugins/blob/ma ...

  9. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  10. div图片垂直居中

    div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸 ...