参考 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. 达内TTS6.0课件oop_day01

  2. C++中operator关键字（重载操作符）

    operator是C++的关键字,它和运算符一起使用,表示一个运算符函数,理解时应将operator=整体上视为一个函数名. 这是C++扩展运算符功能的方法,虽然样子古怪,但也可以理解:一方面要使运算 ...

  3. IE8，9下的ajax缓存问题

    最近在做一个网站的登录注册框,前端使用了jquery.由于sign和login不是在单独的页面上,而是以一个弹出框出现.所以决定使用ajax来实现注册和登录功能.本以为可以一帆风顺,结果在测试的时候发 ...

  4. R与数据分析旧笔记（十七） 主成分分析

    主成分分析 主成分分析 Pearson于1901年提出的,再由Hotelling(1933)加以发展的一种多变量统计方法 通过析取主成分显出最大的个别差异,也用来削减回归分析和聚类分析中变量的数目 可 ...

  5. Windows 取得至高无上的权限

    第一步:gpedit.msc 第二步:计算机配置-->windows 设置 -->安全设置 -->安全选项 -->用户账户控制 -->以管理员批准模式运行所有管理员 -- ...

  6. SQL Server ansi_null_default | ansi_null_dflt_on

    先说一下这两个变量是一个意思,只是它们的作用范围不同 alter database dbTest set ansi_null_default on;  -- 这个的作用域是整个SQL Server   ...

  7. Oracle SQL CPU占用高

    Oracle数据库经常会遇到CPU利用率很高的情况,这种时候大都是数据库中存在着严重性能低下的SQL语句,这种SQL语句大大的消耗了CPU资源,导致整个系统性能低下.当然,引起严重性能低下的SQL语句 ...

  8. IC封装

    1.QFN •QFN—Quad Flat No-lead Package 四方无引脚扁平封装 2.SOIC •SOIC—Small Outline IC 小外形IC封装 3.TSSOP •TSSOP— ...

  9. 使用PyQt来编写第一个Python GUI程序

    原文:使用PyQt来编写第一个Python GUI程序 本文由 伯乐在线 - Lane 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:pythonforengineers.com.欢迎加 ...

  10. MFC 动态创建控件

    动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的.   一.创建动态控件:   为了对照,我们先来看一下静态控件的创建.   放置静态控件时必须先建立一个容器,一 ...