data-toggle="collapse"——指明该元素具有折叠功能；

data-target——设置元素打开折叠后指向的元素链接。

.collapse——用来设置元素为折叠内容。

.in——设置折叠内容初始化为显示状态；

.panel-collapse——指明该元素内容为折叠面板样式。

很多其它细节请參考演示样例：

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>饭盒儿——发现身边不一样的世界</title>

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

    <script src="js/jquery-2.1.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

    </style>

</head>

<body>

<div class="container">

   <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">点击查看</a>

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

        <div class="well">

            Hello world

        </div>

    </div>

    <hr/>

    <div class="panel-group" id="accordion" role="tablist">

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingOne">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">item1</a>

                </h4>

            </div>

            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">

                <div class="panel-body">

                    这真是一个奇妙的站点

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingTwo">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">item2</a>

                </h4>

            </div>

            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">

                <div class="panel-body">

                    这真是一个奇妙的站点2

                </div>

            </div>

        </div>

        <div class="panel panel-default">

            <div class="panel-heading" role="tab" id="headingThree">

                <h4 class="panel-title">

                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">item3</a>

                </h4>

            </div>

            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">

                <div class="panel-body">

                    这真是一个奇妙的站点3

                </div>

            </div>

        </div>

     </div>

</div>

<script>

//    $("#accordion").on('hidden.bs.collapse',function(){

//        alert("隐藏了");

//    })

</script>

</body>

</html>

Bootstrap的js插件之折叠（collapse）的更多相关文章

  1. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  2. Bootstrap transition.js 插件

    Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...

  3. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  4. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  5. Bootstrap transition.js 插件详解

    Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...

  6. Bootstrap的js插件之側边栏停靠(affix)

    以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

  8. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  9. Bootstrap的js插件之按钮(button)

    1)属性: data-loading-text="载入中..."--使button呈现载入状态: data-toggle="button"--使按钮可以切换状态 ...

随机推荐

  1. JS是否存在方法重载

    java里面是存在重载的,那么js中呢?这个问题面试的时候会经常遇到.但是可以肯定的说,js中是不存在重载的,但是我们可以通过其他的方式来模拟重载,我们可以通过argument方法来实现. argum ...

  2. Spring核心之IoC——依赖注入

    在J2EE开发平台中,Spring是一种优秀的轻量级企业应用解决方案.Spring倡导一切从实际出发,它的核心技术就是IOC(控制反转)和AOP(面向切面编程)技术.本文用的Spring版本为spri ...

  3. Java：Object类详解

    Java的一些特性会让初学者感到困惑,但在有经验的开发者眼中,却是合情合理的.例如,新手可能不会理解Object类.这篇文章分成三个部分讲跟Object类及其方法有关的问题. 上帝类 问:什么是Obj ...

  4. JNI字段描述符

    “([Ljava/lang/String;)V” 它是一种对函数返回值和参数的编码.这种编码叫做JNI字段描述符(JavaNative Interface FieldDescriptors).一个数组 ...

  5. LoadLibrary文件路径及windows API相关的文件路径问题

    LoadLibrary HMODULE WINAPI LoadLibrary( _In_  LPCTSTR lpFileName ); Loads the specified module into ...

  6. JavaScript 你不知道的事 -- 关于函数

    接上篇Javascript 你不知道的事,直接条列了: 每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__ ...

  7. Maven核心概念之仓库，生命周期与插件

    宏观图 一.仓库 统一存储全部Maven项目共享的构建的位置就是仓库. 仓库分为本地仓库和远程仓库.远程仓库又分为中央仓库(中央仓库是Maven核心自带的远程仓库),伺服(还有一种特殊的远程仓库,为节 ...

  8. 了解Redis 和 Memcached 的区别

    1.Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支持更丰富的数据操作,通常在Memcached里,你需要将数据拿到客户端来进行类似的修改再set回去. ...

  9. 【笔记】css 1像素边框

    有时候在移动端显示1像素的边框时 可能因为dpi 的原因造成像素有变差 所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果 关于dpi 的解释请看张鑫旭老师的文章:htt ...

  10. Cognos10.2.1配置加密信息不能被加密

    好奇心害死猫,可是我不是猫.这个问题已经不是第一次出现了,之前是从10.1.1到10.2.0出现的,这次是从10.2.0到10.2.1出现的,上次由于时间的问题被搁置了,这次竟然再次遇到同样的问题,已 ...