Bootstrap3 折叠插件的事件

折叠插件的事件

Bootstrap还为折叠组件提供了一组事件，通过这些事件，可以监听用户的行为及折叠组件的状态。这些事件及含义见表 4‑10。

表 4‑10 折叠插件的事件及含义
事件	含义
show.bs.collapse	调用show方法时，立即触发该事件
shown.bs.collapse	当可折叠元素对用户完全可见（会等待过渡效果执行结束）后，触发该事件
hide.bs.collapse	调用hide方法时，立即触发该事件
hidden.bs.collapse	当可折叠元素对用户完全不可见（而且过渡效果执行完毕）后，触发该事件

例如，要在可折叠元素对用户完全可见时，将内容区的文本颜色改为橙色，代码可以这么写：

<script>
$('.collapse').collapse({
parent: "#accordion2"
});
$('.accordion-toggle').click(function(){
$(this).parent().next().collapse('toggle');
});
$('.accordion-body').on('show', function(e){
$(e.target).css({"color":"#f60"});
});
</script>

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap3 折叠插件的事件相关推荐

Bootstrap 折叠插件Collapse 事件
事件 Bootstrap还为折叠组件Collapse提供了一组事件,通过这些事件,可以监听用户的行为及折叠组件的状态.这些事件及含义见表 5‑8. 表 5‑8 折叠插件的事件及含义事件含义 sho ...
Bootstrap3 轮番插件的事件
轮番插件的事件 Bootstrap为轮番插件定义了两个事件,通过这些事件,可以监听播放行为及轮番组件的状态.这些事件及含义见表 4‑12. 表 4‑12 轮番插件的事件及含义事件含义 slide. ...
Bootstrap3 折叠插件的选项
折叠插件的选项 Bootstrap为折叠插件提供了 2 个选项,所有的选项都可以通过 data 属性或JavaScript进行设置.见表 4‑9. 表 4‑9 collapse插件的选项名称类型 ...
Bootstrap3 折叠插件的调用方式
折叠插件的调用方式折叠插件的结构相对复杂,但调用比较简单,可以通过data属性调用,也可以通过JavaScript调用. 1.data 属性调用要激活折叠插件的激活行为,首先为标题部分的链接定义 ...
Bootstrap3 折叠插件的使用方法
折叠折叠插件(collapse.js)可以很容易地让页面区域折叠起来.当列表菜单的条目特别多,而页面空间有限时,使用类似于手风琴的折叠菜单可以节约页面空间,方便用户浏览. 使用方法 Bootstra ...
Bootstrap3 工具提示插件的事件
工具提示插件的事件 Bootstrap为工具提示插件提供了 5 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 4‑6. 表 4‑6 tooltip插件的事件及含义 ...
Bootstrap3 警告框插件的事件
警告框插件的事件警告框有两个可以被监听的事件.见表 4‑8. 表 4‑8 警告框的事件及含义事件含义 close.bs.alert close方法被调用后,立即触发该事件 closed.bs.a ...
Bootstrap3 滚动监听插件的事件
滚动监听插件的事件 Bootstrap为滚动监听插件提供了一个事件 activate.bs.scrollspy,每当一个新的导航项目被激活时,就会触发该事件,并自动为导航条的相应菜单项添加了一个 .a ...
Bootstrap3 插件的事件
插件的事件 Bootstrap 为大部分插件所具有的动作提供了自定义事件,这些事件一般都有动词原形和过去分词两种命名形式.动词原形形式的事件(如,show)在事件开始时触发,过去分词形式的事件(如,s ...

Bootstrap3 折叠插件的事件

折叠插件的事件

Bootstrap3 折叠插件的事件相关推荐

最新文章

热门文章