参考 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. openstack之nova启动实例过程

    概述: 启动一个实例包含以下步骤: API server:处理用户请求并转发至cloud controller cloud controller:处理计算节点.网络控制.api server 以及sc ...

  2. 获取第上一个兄弟元素 屏蔽浏览器的差异（PreviousElementSibling）

    //获取element上一个兄弟元素 function getPreviousElementSibling(element){ //能力检测 判断是否支持PreviousElementSibling ...

  3. JavaScript之面向对象的概念,对象属性和对象属性的特性简介

    一.大家都知道,面向对象语言有一个标志,那就是他们都有类的概念,通过类我们可以创建任意多个具有相同属性和方法的对象.但ECMAScript(指定JavaScript标准的机构,也就是说JavaScri ...

  4. WebService：The remote server returned an error: (400) Bad Request

    开发工具:VS2010.开发组件:WebService.运行环境:Windows 今天一个同事在进行计费接口联调试时,发现了一个非常奇怪的问题:接口在家里环境测试,一切正常,但是部署到现网环境之后,连 ...

  5. trangle

    #include<iostream> #include<algorithm> using namespace std; int main() { int a,b,c; whil ...

  6. isalpha函数，判断字符是否是字母

    头文件:<iostream> or  <cctype>  在c语言中<ctype.h> 功能:判断一个字符是否是英文字符,是大写返回1,是小写返回2,不是英文字符返 ...

  7. BZOJ 1559: [JSOI2009]密码( AC自动机 + 状压dp )

    建AC自动机后, dp(x, y, s)表示当前长度为x, 在结点y, 包括的串的状态为s的方案数, 转移就在自动机上走就行了. 对于输出方案, 必定是由给出的串组成(因为<=42), 所以直接 ...

  8. python 缩进导致的问题

    今天写Python 看着没有问题 运行就各种问题 object has no attribute 最后发现 Vim 设置里面有个  tabstop  我设置的是4 应该设置成8

  9. [Usaco2009 Feb]Revamping Trails 堆优化 Dijkstra

    .. 这题一眼就看出就是一个二维DP dp[i][j]表示到点i使用了j次免费边的最短距离 MD 卡SPFA.. 遂写dij. AC #include <iostream> #includ ...

  10. ThinkPHP第二十五天(自动完成、用户名密码PHP正则、移位或加密函数)

    1.ThinkPHP自动完成功能 跟昨天的自动验证功能类似,也是需要在自定义的UserModel类,进行使用. 使用方法:定义$_auto属性 $_auto = array( array(完成字段,完 ...