事件

下表列出了折叠（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. mysql日常使用总结（持续更新中）

    记录一些日常的mysql常用的使用, 方便随用随查. 一.表结构 1.1 查看表结构 方式1: 可以查看建表语句,完整的表结构. show create table table_name; 方式2:可 ...

  2. 屏蔽“您目前使用的Discuz!程序有新版本发布,请及时升级！”提示

    在/discuz/source/admincp目录下找到文件:admincp_main.php 找到第49行: if($_G['uid'] && $_G['member']['allo ...

  3. Maven的学习资料收集--（九） 构建SSH项目以及专栏maven

    在这里整合一下,使用Maven构建一个SSH项目 1.新建一个Web项目 可以参照前面的博客 2.添加依赖,修改pom.xml <project xmlns="http://maven ...

  4. quartz任务调度初次使用记录

    近期公司开发的数据交换系统嵌入了quartz任务调度功能,大概了解了任务调度的整个流程,项目中需要用到它来进行定时任务操作,对数据定时检查以及及时交换. Quartz是OpenSymphony开源组织 ...

  5. C++中的引用和指针

    引用和指针有何区别?何时只能使用指针而不能使用引用?    引用是一个别名,不能为 NULL 值,不能被重新分配:指针是一个存放地址的变量.当需要对变量重新赋以另外的地址或赋值为 NULL 时只能使用 ...

  6. ElasticSearch java API 按照某个字段排序

    searchRequestBuilder.addSort("publish_time", SortOrder.DESC); 按照某个字段排序的话,hit.getScore()将会失 ...

  7. [备忘]java 静态块、非静态块、静态函数、构造函数 执行顺序

    原文链接:http://liqita.iteye.com/blog/1472717 java中经常有一些静态块,这是用来在生成类之前进行的初始化,无论java还C++语言中的static,都是最先初始 ...

  8. Magento 中一个订单的“生命历程”

    当我们在网上愉快的买买买的时候, 你知道在这些屏幕“背后”正在进行着什么吗? 1. 当一个产品被加入到购物车后, 实际上发生了什么? 当第一个产品被加入到购物车, 系统首先会生成一个 quote (q ...

  9. jQuery学习笔记（四）

    动画效果 显示和隐藏效果 无动画效果 显示:show() 隐藏:hide() <!DOCTYPE html> <html lang="en"> <he ...

  10. 配置Linux环境

    安装mariadb +主从复制https://www.cnblogs.com/pyyu/p/9467289.html 参考博客 redis https://www.cnblogs.com/pyyu/p ...