Bootstrap collapse can'Don’不要处理太多的元素

Bootstrap collapse can't handle too many elements

本文关键字：处理 太多 元素 Don can collapse Bootstrap      更新时间：2023-09-26

我有一个引导折叠面板，其中加载了来自ajax调用的大量数据。当数据加载到折叠面板中时，会填充大约2000个dom元素，主要是复选框和跨度。我已经测量了调用和创建dom元素的时间，这似乎不是问题。使用jQuery加载和创建元素只需不到一秒钟的时间。

然而，当我单击展开collpased面板时，会导致站点滞后，并且需要很长时间才能展开面板。

有什么解决方案，或者可以替代自举折叠面板吗？你能展开它并在滚动时递增地显示元素吗？

我似乎对包含较少元素的折叠面板没有任何问题。

     <div id="collapse_function" class="panel-collapse collapse">
      <div class="panel-body">
        <div class="panel-group" id="inner_accordion">
        <!-- Checkboxes and spans are loaded here dynamically -->
        </div>
      </div>

编辑：似乎是这样的情况，即使有禁用的动画，网站滞后。

您应该使用：

$('#collapse_function').on('show.bs.collapse', function() { alert('we Go SHOW'); });
$('#collapse_function').on('hide.bs.collapse', function() { alert('we Go Hide'); });
$('#collapse_function').on('shown.bs.collapse', function() { alert('we ARE SHOWN'); });
$('#collapse_function').on('hidden.bs.collapse', function() { alert('we ARE HIDDEN'); });

嗯，我似乎在折叠面板中添加了太多的dom元素。我通过在面板中向下滚动时懒散地加载元素来解决这个问题。

相关文章：