Question

上下文：jQuery，Bootstrap Panels＆amp; Bootstrap Collapse

我试图崩溃大约300多个Bootstrap面板，但由于DOM更改，UI线程冻结。这是当前的代码：

$('#CollapseAll').click(function() {
    $('.panel-collapse').collapse('hide');
});

动画完成后会有一个hidden.bs.collapse事件被触发。

如何在事件触发后才折叠下一个元素？

Answer 1

hide.bs.collapse当hide方法立即触发此事件被称为。 hidden.bs.collapse当这个事件被触发时 collapse元素已被用户隐藏（将等待CSS 过渡到完成）。

$(firstElement).on('hide.bs.collapse', function () {
      $(seconedElement).collapse('hide');
})

Answer 2

这是我最终使用的解决方案（不太漂亮）

用户界面不会挂起，面板会更好地折叠

var collapseQueue;
$('.panel-collapse').on('hide.bs.collapse', function(){
    if (collapseQueue) {
        var elem = collapseQueue.first();
        collapseQueue = collapseQueue.slice(1);
        setTimeout(function() {
            elem.collapse('hide'); 
        }, 100);           
    }
});
$('.panel-collapse').on('show.bs.collapse', function(){
    if (collapseQueue) {
        var elem = collapseQueue.first();
        collapseQueue = collapseQueue.slice(1);
        setTimeout(function() {
            elem.collapse('show');
        }, 100);
    }
});

$('#CollapseAll').click(function() {
    collapseQueue = $('.panel-collapse');
    var elem = collapseQueue.first();
    collapseQueue = collapseQueue.slice(1);
    elem.collapse('hide');
});
$('#ExpandAll').click(function() {
    collapseQueue = $('.panel-collapse');
    var elem = collapseQueue.first();
    collapseQueue = collapseQueue.slice(1);
    elem.collapse('show');
});

折叠多个面板时，用户界面挂起

2 个答案: