为了防止jQuery在Bootstrap 4折叠组件(accordion)的快速切换中崩溃,可以采取以下几个步骤:
stop()
方法来停止当前正在进行的动画,然后再执行下一个动画。下面是一个示例代码片段,展示了如何使用jQuery和Bootstrap 4创建一个基本的accordion,并防止快速切换时的崩溃:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Content for collapsible item #1
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Content for collapsible item #2
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#accordion').on('show.bs.collapse', function () {
$(this).find('.collapse.show').collapse('hide');
});
});
</script>
</body>
</html>
这个示例代码中,我们使用了Bootstrap提供的accordion组件,并在jQuery的show.bs.collapse
事件中添加了一个事件处理程序。该处理程序会在折叠项展开时,自动隐藏其他已展开的折叠项,以避免快速切换时的崩溃。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云