折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

如果您想要单独引用该插件的功能，那么您需要引用 collapse.js。同时，也需要在您的 Bootstrap 版本中引用 Transition（过渡）插件。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

您可以使用折叠（Collapse）插件：

创建可折叠的分组或折叠面板（accordion），如下所示：

<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 折叠面板</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-accordion.htm#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-accordion.htm#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-accordion.htm#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</div>
</div>
</div>
</body>
</html>

结果如下所示：

    1. data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
    2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。
    3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
  • 创建不带 accordion 标记的简单的可折叠组件（collapsible），如下所示：
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 简单的可折叠组件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
简单的可折叠组件
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
</body>
</html>

结果如下所示：

下面的实例演示了方法的用法：

<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-method.htm#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-method.htm#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-method.htm#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="/demo/bootstrap3-plugin-collapse-method.htm#collapseFour">
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
   $(function () { $('#collapseFour').collapse({
      toggle: false
   })});
   $(function () { $('#collapseTwo').collapse('show')});
   $(function () { $('#collapseThree').collapse('toggle')});
   $(function () { $('#collapseOne').collapse('hide')});
</script>
</body>
</html>

结果如下所示：

Bootstrap 折叠（Collapse）插件的更多相关文章

  1. Bootstrap 折叠(collapse)插件面板

    折叠插件(collapse)可以很容易地让页面区域折叠起来, 无论您是用它来创建折叠导航还是内容面板,它都允许很多内容选项. 您可以使用折叠插件 1.创建可折叠的分组或折叠的面板 <!DOCTY ...

  2. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  3. Bootstrap 折叠(collapse) 初见

    以下代码来自bootstrap中文网 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c ...

  4. bootstrap 折叠collapse失效

    手动点击折叠,然后调用折叠全部以后,在手动点击折叠项,折叠失效. 方法,折叠项是通过添加或删除".in"来实现,实现如下 $(".collapse.in").c ...

  5. BootStrap中的collapse插件堆叠效果

    通过网络上的一系列查找,总结出的collapse插件堆叠效果(网上没有找到,只能自己弄了,帮助那些和我遇到一样状况的同学) 首先感谢一位网友的知识总结给了我灵感,在这里先帮他推荐一波(https:// ...

  6. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

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

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

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

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

  9. bootstrap导入JavaScript插件

    Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中.因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入 ...

  10. Bootstrap 的 Collapse

    一.简介 Collapse 插件为 HTML 标签提供折叠.展开行为,依赖 transition.js(bootstrap.js 文件中已包含). 二.实现机制 实现 Collapse 效果需要: 一 ...

随机推荐

  1. [转] --- Error: “A field or property with the name was not found on the selected data source” get only on server

    Error: “A field or property with the name was not found on the selected data source” get only on ser ...

  2. ArcEngine读取数据（数据访问） （转）

    读取和访问数据是进行任何复杂的空间分析及空间可视化表达的前提,ArcGIS支持的数据格式比较丰富,下面就这些格式Shapefile.Coverage.Personal Geodatabase.Ente ...

  3. Dictionary和Hashtable的一些异同

    Dictionary和Hashtable 区别: Dictionary和Hashtable 区别 Dictionary Hashtable  支持范型 不支持 需要自己做线程同步 通过调用 Synch ...

  4. sga_target大于sga_max_size数据库无法启动

    环境:oracle 11g 单机 操作过程:由于修改SGA的大小,只修sga_max_size,没有修改sga_target,改导sga_max_size大于sga_target的大小,使得数据库无法 ...

  5. UVa 1354 天平难题 Mobile Computing

    整个题考虑起来 最主要要计算的状态 是树的状态 于是要计算出所有可能挂坠可能组成的树的所有形态 tree 用于保存这些状态 考虑不要重复计算,有一个vis 数组 预处理可以先计算出一棵树的重量,简化计 ...

  6. requireJS的引用

    main.js: require.config({ paths: { jquery: 'jquery-1.7.2', biz: 'biz', }}); require(['jquery', 'biz' ...

  7. extern关键字

    1.extern "C" void func(){...} extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其 ...

  8. python 2.4 与 python 3.0 的比较

    转过来,留着日后查看 [转自:]http://hi.baidu.com/autoitcn/blog/item/5f41973294b5fc4fac4b5f77.html python 2.4 与 py ...

  9. 使用js把json字符串转为js对象的方法

    ECMA-262(E3) 中没有将JSON概念写到标准中,还好在 ECMA-262(E5)中JSON的概念被正式引入了,包括全局的JSON对象和Date的toJSON方法. 1,eval方式解析,恐怕 ...

  10. java_method_下载导入模版

    //调用方法 upDown.download(request, response, request.getRealPath("")+"/output/BlackNumbe ...