事件

下表列出了折叠（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. Jmeter分布式(转)jmeter -n -t baidu.jmx -l result.jtl -R 172.16.20.146:1099

    1.准备2台在同一个局域网内的机器,一台作为master主控机,一台作为slave 执行机 master机器ip:172.16.20.134 slave机器ip:172.16.20.146 2.在2台 ...

  2. MySQL库改名、表改名

    数据库中的库或表在开发环境下可能需要改名,关于MySQL的改名步骤如下: 1.备份数据库,备份后就可以安心的去改名了,如果操作错误还可以及时恢复 mysqldump -R -uroot -p 数据库名 ...

  3. Codeforces Round #364 (Div. 2) C

    Description Sergei B., the young coach of Pokemons, has found the big house which consists of n flat ...

  4. mycat学习日记：关于联表查询

    https://www.cnblogs.com/toulon/p/4832895.html 在使用数据库中间件之前,我就想到分库分表的操作对于联表操作可能会显得非常复杂.因为如果数据是分片存储的,如果 ...

  5. POJ 2796：Feel Good 单调栈

    题目,给定一个数列,n <= 1e5 .要求找出一个区间,使得其内区间最小值 * 区间总和的值最大,要求输出区间. 首先先维护一个单调递增的栈,同时记录一个lef值表示:lef[i]表示当前栈内 ...

  6. HDU 5773 The All-purpose Zero 脑洞LIS

    给定一个序列,里面的0是可以任变的.问变化后最长的LIS的长度 首先,0全部选上是不亏的.这个不知道怎么说,YY一下吧. 最关键的就是解决2 0 0 3 这种问题了. 注意到这个序列的LIS应该是3 ...

  7. Python2.7编程基础（博主推荐）

    不多说,直接上干货! 见 http://www.runoob.com/python/python-tutorial.html

  8. druid监控sql

    我这里是以运维的角度查看sql, 前面的配置需要开发配合,参考:https://blog.csdn.net/u010391342/article/details/80606482 1.首先在注册中心( ...

  9. Javascript常见问题

    倒计时 <Script Language="JavaScript"> var timedate= new Date("October 1,2002" ...

  10. android下的异步任务

    异步任务一般用在加载一些网络资源的时候用,主要的实现方法是新建一个类来继承AsyncTask这个父类,然后复写该类下面的一些方法,其中doInBackground方法是必须要的,下面看代码 packa ...