事件

下表列出了折叠（Collapse）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.collapse 在调用 show 方法后触发该事件。 
$('#identifier').on('show.bs.collapse', function () {

  // 执行一些动作...

})
shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。 
$('#identifier').on('shown.bs.collapse', function () {

  // 执行一些动作...

})
hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。 
$('#identifier').on('hide.bs.collapse', function () {

  // 执行一些动作...

})
hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。 
$('#identifier').on('hidden.bs.collapse', function () {

  // 执行一些动作...

})

实例

下面的实例演示了事件的用法：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例 - 折叠（Collapse）插件事件</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:20px">
<div class="panel-group"id="accordion">
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title"><a href="#collapseDemo"data-toggle="collapse"data-parent="#accordion">点击我进行展开，再次点击我折叠--show事件</a></h4>
</div>
<div id="collapseDemo" class="panel-collapse collapse in">
<div class="panel-body">
俄罗斯政府还要求，俄方旅行社必须停止发售土耳其旅游线路产品；中断俄罗斯与土耳其之间的包机往来。土耳其是俄罗斯游客主要海外旅游目的地。俄罗斯外交部早些时候已经告诫俄罗斯公民，俄方战机遭击落事件将影响俄土关系，因而应避免前往土耳其。
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#collapseDemo").on("show.bs.collapse", function () {
alert("呵，当您点击展开时会弹出警告框！")
})
})
</script>
</body>
</html>

Bootstrap 历练实例 - 折叠（Collapse）插件事件的更多相关文章

  1. Bootstrap 历练实例 - 折叠（Collapse）插件方法

    方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $(' ...

  2. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  3. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  4. Bootstrap历练实例：警告框(Alert)插件事件

    事件 下表列出了警告框(Alert)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 close.bs.alert 当调用 close 实例方法时立即触发该事件. $('#myal ...

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

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

  6. Bootstrap历练实例：弹出框(popover)事件

    事件 下表列出了弹出框(Popover)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.popover 当调用 show 实例方法时立即触发该事件. $('#my ...

  7. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  8. Bootstrap 历练实例 - 按钮（Button）插件复选框

    复选框(Checkbox) 您可以创建复选框按钮 组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换. & ...

  9. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

随机推荐

  1. 利用canvas实现倒计时功能

    wxml代码:<view class=“page-body”><view class=“page-body-wrapper”><canvas canvas-id=“can ...

  2. JSP-模拟银行卡账号密码登录页面跳转

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 自定义标签遇到的问题unable to load tag handler class "XX" for tag "XX"

    xxxx.tld文件的<tag-class>路径不正确,当时把until写成util了 摘自:http://zhidao.baidu.com/link?url=HP4tjHit2EXokI ...

  4. ES6扩展运算符...进行的数组删除

    今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了. const ADD_USER = &qu ...

  5. linux下ssh key秘钥登陆远程服务器设置

    本地的用户名需要和ssh服务器的用户名一致 1.在Server服务器上加载私钥文件ssh-add wang_rsa 2.如果系统提示:could not open a connection to yo ...

  6. RMAN restore fails with ORA-01180: can not create datafile 1 (文档 ID 1265151.1)

    http://blog.itpub.net/26655292/viewspace-2131269/ ########Q&A issue1:ORA-01180: can not create d ...

  7. 转 怎样用grep命令去掉空格行和以#开头的行

    怎样用grep命令去掉空格行和以#开头的行 https://jingyan.baidu.com/article/359911f544c36b57fe030637.html

  8. VMware下linux与window文件夹共享

    这里说的是在虚拟机下来实现在windows下共享一个文件夹. 下面来说明一下是如何实现的: 1．  安装VMware.Workstation. 2．  安装Redhat Linux 9.0,在虚拟机下 ...

  9. 在 Angularjs 中 ui-sref 和 $state.go 如何传递单个多个参数和将对象作为参数

    一: 如何传递单个参数 首先,要在目标页面定义接受的参数: 传参, 接收参数, 在目标页面的controller里注入$stateParams,然后 "$stateParams.参数名&qu ...

  10. Response.Redirect 打开新窗口的两种方法

    一般情况下,Response.Redirect 方法是在服务器端进行转向,因此,除非使用 Response.Write("<script>window.location='htt ...