javascript - Bootstrap崩溃无法处理太多元素

Question

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

但是，当我单击展开折叠的面板时，它会导致网站滞后，并且面板需要一段时间才能展开。

是否有任何解决方案，或者 Bootstrap 折叠面板的替代方案？您能否展开它并在滚动时逐渐显示元素？

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

     <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>

编辑:情况似乎是这样，即使禁用动画，网站也会出现滞后。

Answer 1

你应该使用:

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