参考 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. strtus2.3 java.lang.NoSuchFieldException: DEFAULT_PARAM>

    strtus2.3.15.1 的bug请下载 http://download.csdn.net/detail/livalue/6229373 或加群到群共享中下载.214579879

  2. 【攻防实战】SQL注入演练！

    这篇文章目的是让初学者利用SQL注入技术来解决他们面临的问题, 成功的使用它们,并在这种攻击中保护自己. 1.0 介绍 当一台机器只打开了80端口, 你最依赖的漏洞扫描器也不能返回任何有用的内容, 并 ...

  3. BZOJ 1146: [CTSC2008]网络管理Network( 树链剖分 + 树状数组套主席树 )

    树链剖分完就成了一道主席树裸题了, 每次树链剖分找出相应区间然后用BIT+(可持久化)权值线段树就可以完成计数. 但是空间问题很严重....在修改时不必要的就不要新建, 直接修改原来的..详见代码. ...

  4. mysql 主从实现

    主库:192.168.1.19 从库:192.168.1.20 开启db_test单库复制 常见问题 参考文档 主配置  以mysql root用户登录,用下面sql创建专门用于主从复制的mysql用 ...

  5. Microsoft Azure 负载平衡服务

     Microsoft Azure 为在其中托管的虚拟机(IaaS) 和云服务(PaaS) 提供负载平衡服务.负载平衡支持应用程序伸缩,并且提供应用程序故障恢复以及其他优势. 可以通过以下方式访问负 ...

  6. delphi ICS控件示例解读

    {* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Author: Fran鏾is PIETTE ...

  7. Mysql 学习记录

    ( xampp 的mysql 与 直接用 dnf 安装的 mysql 有冲突! ) 1. 数据库基本知识: 一张表的行 又称为 记录 一张表的列 又称为 字段 表结构:所有字段,规定了你的每一条记录所 ...

  8. JqGrid使用经验

    一.更改分页组件的样式 分页组件中

  9. SSDP协议的Android实现以及使用

    前面一篇博客里面已经介绍过SSDP协议原理,本篇博客将实现实现Android上的SSDP协议. 关键技术分析:1.发送广播:须要发送送广播,所以须要使用MulticastSocket.SocketAd ...

  10. 对JAVA Bean使用PropertyDescriptor反射调用JAVA方法

    对于符合JAVA Bean规范的bean,调用其方法应优先使用java.beans.PropertyDescriptor获取Method进行方法调用,以获得更大的可维护性. 示比例如以下: NonCo ...