事件

下表列出了折叠（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. Windows平台Anaconda使用笔记

    1.官网下载anaconda安装. 2.将命令行工具路径加入系统环境变量 C:\ProgramData\Anaconda3\ScriptsC:\ProgramData\Anaconda3\Librar ...

  2. POJ1024 Tester Program

    题目来源:http://poj.org/problem?id=1024 题目大意: 有一个迷宫,迷宫的起点在(0,0)处.给定一条路径,和该迷宫墙的设置,要求验证该路径是否为唯一的最短路径,该种墙的设 ...

  3. VUE中嵌套路由

    官网地址:https://router.vuejs.org/zh-cn/essentials/nested-routes.html 路由嵌套一般使用在后台管理系统中 给一个比较简单的小案例 <! ...

  4. JS精粹知识点和我的解释

    函数若是不return则默认返回undefined const value=()=>{ let a=3; } let value_test; console.log(value(),value_ ...

  5. 我在B站学习 清华大学教授带你学习c++(进阶）构造函数

    B站av11459203的一系列视频,跳过了基础篇直接进入进阶,从此难度开始加大.这里做出一些笔记分享一下. 我是1.25速度看的..对应分P 37-38 构造函数的作用 将对象初始化为一个特定的初始 ...

  6. Codeforces Round #364 (Div. 2) A

    Description There are n cards (n is even) in the deck. Each card has a positive integer written on i ...

  7. Linux如何用查看域名解析

    方法/步骤     查看本地dns配置.确保能上网,dns配置正确.可以查看网卡配置文件和dns配置文件,网卡里配置优先.   ping命令.第一行会返回域名及解析的ip.   host命令.会返回域 ...

  8. Ubuntu14.04修改主机名

    1.Ubuntu主机名位于/etc/hostname里,将其修改为自己需要的名称 2.修改/etc/hosts文件,将其中127.0.1.1对应的主机名更改为新的主机名,与/etc/hostname里 ...

  9. 湖南省第十二届大学生计算机程序设计竞赛 problem A 2016

    如果 a * b % 2016 == 0 如果a = 1 ,且 a * b % 2016 == 0 考虑一下a = 2017的时候 2017 * b = (2016 + 1) * b % 2016 = ...

  10. Oracle数据库SQL语句操作大全汇总

    数据库各个表空间增长情况的检查: SQL >SELECT A.TABLESPACE_NAME,( 1-(A.TOTAL)/B.TOTAL)* 100 USED_PERCENT FROM (SEL ...