Bootstrap 折叠(Collapse)插件

2020-06-18 06:00:47易采站长站整理

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.


$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});

结果如下所示:

折叠(Collapse)插件方法

事件

下表列出了折叠(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 () {
    // 执行一些动作...
})

实例

下面的实例演示了事件的用法:

实例

 


点击我进行展开,再次点击我进行折叠。--shown 事件

Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident.
Ad vegan excepteur butcher vice lomo.


$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('嘿,当您展开时会提示本警告');})
});

结果如下所示:

折叠(Collapse)插件事件

相关文章 大家在看