事件

下表列出了折叠（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. dorado开发模式下实现动态查询

    使用dorado开发模式,我们可以实现以下开发技巧 开发技巧1.实现动态查询功能: 1. 查询按钮的onClick事件中写入: datasetEmployee.parameters().setValu ...

  2. windows srver 显示桌面图标。

    rundll32.exe shell32.dll,Control_RunDLL desk.cpl,,0

  3. jquery——样式操作

    思想:同一个函数完成取值和赋值 addClass.removeClass. <!DOCTYPE html> <html lang="en"> <hea ...

  4. LeetCode 179 Largest Number 把数组排成最大的数

    Given a list of non negative integers, arrange them such that they form the largest number.For examp ...

  5. JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳

    一.前言 有些东西很好用,但是你未必知道:有些东西你可能用过,但是你未必知道原理.实现一个目的有多种途径,俗话说,条条大路通罗马.发散一下大家的思维以及拓展一下知识面. 二.实现一个简短的sleep函 ...

  6. ThreadPoolExecutor线程池的keepAliveTime

    keepAliveTime含义 看了很多文章觉得都不能把keepAliveTime的意思说的很明白,希望通过自己的理解把keepAliveTime说的明确一些 先引用一句我觉得相对说的比较明白的含义: ...

  7. pat1099. Build A Binary Search Tree (30)

    1099. Build A Binary Search Tree (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN ...

  8. linux下的idea的界面问题，错位以及各种...

    问题 ’ 方法 主题设置为GTK,多余的点会消失,而且字体也会好很多

  9. 如何远程连接非默认端口SQL Server

    SQL Server Management Studio建立远程SQL连接  连接的时候写: 127.0.0.1,49685\sqlexpress 记得使用逗号,不是冒号

  10. Java 多线程的实现方法

    package com.jckb; /**多线程实现的两种方法 * * @author gx * */ public class Test2 { public static void main(Str ...