UI掛而倒塌多個面板

Question

語境：jQuery的，引導面板&引導收起

我想倒塌約300+引導板，但由於DOM的改變UI線程凍結。 這是當前的代碼：

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

有動畫完成後，都會激發一個hidden.bs.collapse事件。

只有在事件觸發後，我如何摺疊下一個元素？

Answer 1

hide.bs.collapse當調用隱藏方法 時立即觸發此事件。 hidden.bs.collapse當用戶隱藏了 摺疊元素（將等待CSS 轉換完成）​​時觸發此事件。

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

Answer 2

這是我最終使用的解決方案（不漂亮）

的UI不會掛起和崩潰的面板更好

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'); 
});