实例

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

  • .collapse 隐藏内容。
  • .collapse.in 显示内容。
  • .collapsing 当过渡效果开始时被添加，当过渡效果完成时被移除。

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">
  <div class="well">
    欢迎到汇智网学习，祝君收获多多...
  </div>
</div>     
</body>
</html>

可折叠的实例

  • data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
  • href 或 data-target 属性添加到父组件，它的值是子组件的 id。
  • data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/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="#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="#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="#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>
<h4 style="color:red;">It's also possible to swap out .panel-bodys with .list-groups.</h4>
<div class="panel-group" role="tablist">
    <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="collapseListGroupHeading1">
        <h4 class="panel-title" id="-collapsible-list-group-">
          <a class="" data-toggle="collapse" href="#collapseListGroup1" aria-expanded="true" aria-controls="collapseListGroup1">
            Collapsible list group
          </a>
        <a class="anchorjs-link" href="#-collapsible-list-group-"><span class="anchorjs-icon"></span></a></h4>
      </div>
      <div id="collapseListGroup1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="collapseListGroupHeading1" aria-expanded="true">
        <ul class="list-group">
          <li class="list-group-item">Bootply</li>
          <li class="list-group-item">One itmus ac facilin</li>
          <li class="list-group-item">Second eros</li>
        </ul>
        <div class="panel-footer">Footer</div>
      </div>
    </div>
  </div>
</body>
</html>

用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：

Class 描述
.collapse 隐藏内容。
.collapse.in 显示内容。
.collapsing 当过渡效果开始时被添加，当过渡效果完成时被移除。

通过 data 属性

　　向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

　　为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

通过 JavaScript

  1. $('.collapse').collapse()

参数

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称 类型/默认值 Data 属性名称 描述
parent selector
默认值：false		 data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle boolean
默认值：true		 data-toggle 切换调用可折叠元素。

方法

下面是一些折叠（Collapse）插件中有用的方法：

方法 描述 实例
Options: .collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。
  1. $('#identifier').collapse({
  2. toggle: false
  3. })
Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素。
  1. $('#identifier').collapse('toggle')
Show: .collapse('show') 显示可折叠元素。
  1. $('#identifier').collapse('show')
Hide: .collapse('hide') 隐藏可折叠元素。
  1. $('#identifier').collapse('hide')

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/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="#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="#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="#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="#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>

事件

下表列出了折叠（Collapse）插件中要用到的事件。

事件 描述 实例
show.bs.collapse 在调用 show 方法后触发该事件。
  1. $('#identifier').on('show.bs.collapse', function () {
  2. // 执行一些动作...
  3. })
shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。
  1. $('#identifier').on('shown.bs.collapse', function () {
  2. // 执行一些动作...
  3. })
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。
  1. $('#identifier').on('hide.bs.collapse', function () {
  2. // 执行一些动作...
  3. })
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。
  1. $('#identifier').on('hidden.bs.collapse', function () {
  2. // 执行一些动作...
  3. })

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<div class="panel-group" id="accordion">
   <div class="panel panel-info">
      <div class="panel-heading">
         <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion"
               href="#collapseexample">
               点击我进行展开，再次点击我进行折叠。--shown 事件
            </a>
         </h4>
      </div>
      <div id="collapseexample" 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 () {
      $('#collapseexample').on('show.bs.collapse', function () {
         alert('嘿，当您展开时会提示本警告');})
   });
</script>
</body>
</html>

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

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

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

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

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

  3. bootstrap 折叠collapse失效

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

  4. Bootstrap 折叠(collapse) 初见

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

  5. 第二百四十七节，Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一．按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  6. bootstrap插件学习-bootstrap.collapse.js

    先看bootstrap.collapse.js的结构 var Collapse = function ( element, options ){} // 构造器 Collapse.prototype ...

  7. open live writer安装以及代码高亮、折叠插件安装

    一.目的 方便在本地写博客,不用在浏览器上写. 二.open live writer的安装 下载open live writer 这是我的 链接:https://pan.baidu.com/s/1u8 ...

  8. bootstrap学习之三—插件

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

  9. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

随机推荐

  1. 直播视频插件--sewise player

    直播视频插件 -- sewise player 2017-1-9 因为公司要开发一个关于购车直播的新项目,需要在页面引入直播视频,项目组之前都没有做过关于直播类型的项目,所以可以说是真的从各种资源中筛 ...

  2. HDU2054_A == B ?【模拟题】【大数】【水的问题】

    A == B ? Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  3. 【ThinkPHP学习】ThinkPHP自己主动转义存储富文本编辑器内容导致读取出错

    RT. ThinkPHP的conf文件里的Convention.php有一个配置选项 'DEFAULT_FILTER' => 'htmlspecialchars', // 默认參数过滤方法 用于 ...

  4. CSDN博文大赛火爆开启

    俗话说的好,程序猿会写博,谁也挡不住! 是不是每一个开发人员都能写出好博文,这个非常难说,但能够肯定的是,能写出好博文的,一定是优秀的程序猿! 写作即思考,养成写博文的习惯,既能帮自己整理技术思路,也 ...

  5. C#整理6——数组的应用

    数组的应用:(一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 作业:1. ...

  6. log4net简单用法

    一.NuGet在Server,mvc中添加Common.Logging和common.Logging.Log4Net如下图 二.在Server层创建logger类 <?xml version=& ...

  7. C++结构体中sizeof（1）

    sizeof sizeof操作符的作用是返回一个对象或类型名的长度,长度的单位是字节. 返回值的类型是标准库命名为size_t的类型,size_t类型定义在cstddef头文件中,该头文件是C标准库的 ...

  8. BigDecimal类对象的使用详解

    双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的数进行运算和处理.Java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行 ...

  9. javascript - 工作笔记 （事件四）

    在javascript - 工作笔记 (事件绑定二)篇中,我将事件的方法做了简单的包装,  JavaScript Code  12345   yx.bind(item, "click&quo ...

  10. CC EAL认证

    国际通用准则(CC) CC(Common Criteria)是国际标准化组织统一现有多种准则的结果,是目前最全面的评价准则.1996年6月,CC第一版发布:1998年5月,CC第二版发布:1999年 ...