javascript - 如何在“Bootstrap：折叠插件”转换完成后触发 JavaScript 函数

Question

我正在尝试在 Bootstrap:插件转换完成后重新调整iframe高度。collapseClick 事件不起作用，因为过渡尚未完成，JavaScript 获取错误的高度信息。任何想法来解决这个问题？

Answer 1

您需要处理折叠插件上的隐藏事件。

来自文档

hidden - 当折叠元素对用户隐藏时触发此事件（将等待 css 转换完成）​​。

$('#myCollapsible').on('hidden', function () {
  // do something…
})

正如@Francesc 在对 Bootstrap 3.0 的评论中指出的那样，我们必须使用

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Answer 2

如果您使用的是 bootstrap 3.0，它非常容易。shown.bs.collapse 是当元素显示转换完成时触发的事件。我相信你正在寻找这样的东西。

$('#myCollapsible').on("shown.bs.collapse", function(){
 //trigger content change
 //this code will be triggered when the collapse transition is completed 
 //that is your myCollapsible element will have 'in' in your class
});

Answer 3

我从未使用过折叠插件，但在文档中它说有一个名为“隐藏”的回调，一旦元素转换完成就应该调用它：

$('#myCollapsible').on('hidden', function () {
    // do something…
});