参考 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学习之十四：闭包(Closures)

    * 闭包(Closures) * 闭包是自包含的功能代码块,可以在代码中使用或者用来作为参数传值. * 在Swift中的闭包与C.OC中的blocks和其它编程语言(如Python)中的lambdas ...

  2. 性能优化工具---top

    作用: 实时显示linux下各个进程的资源占用情况 参数: -d :后面可以接秒数,就是整个程序画面更新的秒数.预设是 5 秒: -p :指定某些个 PID 来进行观察监测而已. -b :以批次的方式 ...

  3. 部署SharePoint2013解决方案

    Add-SPSolutionInstall-SPSolution -Identity Grain2013.wsp -GACDeployment -CompatibilityLevel {14,15}  ...

  4. oracle默认的hr用户使用脚本安装

    1 解压到%ORACLE_HOME%/demo/schema/human_resources/目录下 2 在sys或system用户下运行hr_main.sql脚本(运行命令:@%ORACLE_HOM ...

  5. Csharp多态的实现概述

    (1)什么是多态, 多态就是一个类表现出多种不同的形态, 他的核心是子类对象作为父类对象使用 (2)怎么实现多态, 在Csharp中,可以用接口, 虚方法, 抽象类实现多态,当然,不管是这三种的那一个 ...

  6. Problem G: If We Were a Child Again

    Problem G: If We Were a Child AgainTime Limit: 1 Sec Memory Limit: 128 MBSubmit: 18 Solved: 14[Submi ...

  7. 关于Connection must be valid and open.

    这个Bug真心很操蛋! 我的网站在公司做的运行一切都没问题,回家后咋自己的电脑上出现了Connection must be valid and open.这个问题. 我最后还是在英文网站的一个不起眼的 ...

  8. .Net 类型、对象、线程栈、托管堆运行时的相互关系

    JIT(just in time)编译器 接下来的会讲到方法的调用,这里先讲下JIT编译器.以CLR书中的代码为例(手打...).以Main方法为例: static void Main(){ Cons ...

  9. codeforces 535D. Tavas and Malekas KMP

    题目链接 又复习了一遍kmp....之前都忘光了 #include<bits/stdc++.h> using namespace std; #define pb(x) push_back( ...

  10. windows平台发消息到非UI线程.

    下面的代码是介绍如何在windows平台发消息到非UI线程. 主要是'PeekMessage || GetMessage' 这两个API的应用. 当他们被调用的时候,如果当前线程还没有消息循环,就会创 ...