这是一个引导4 accordion 的身体部分比平常更大，这就是为什么当部分折叠下面的内容，它与它滚动起来。
我使用这段代码来滚动到单击标题的顶部，并取消由于折叠先前打开的部分而导致的滚动。
但它似乎运行之前，崩溃前一个。我在互联网上研究，无法找到解决方案。
代码是一个小冗长的共享相关片段。也填充卡体使用 AJAX 点击标题。
<div id="accordion" class="row"></div>
<script>
success: function(res) {
let resultHtml = ``;
for (let i = 0; i < res.length; i++) {
resultHtml +=
`
<div class="card col-12 px-0">
<div class="card-header" id="heading${i}">
<h5 class="mb-0">
<button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse${i}" data-place-id="${ res[i].place_id }" aria-expanded="false" aria-controls="collapse${i}"><img class="place-icon" src="${ res[i].icon }">
${ res[i].name }
<span class="float-right">Rating: ${ getStars(res[i].rating) }</span>
</button>
</h5>
</div>
<div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#accordion">
<div class="card-body"></div>
</div>
</div>`;
}
$("#accordion").html(resultHtml);
$('#accordion').on('hide.bs.collapse', function () {
$('html, body').animate({
scrollTop: $( event.target ).parent().offset().top
}, 400);
});
</script>shown.bs.collapse和hidden.bs.collapse对我不起作用。show.bs.collapse和hidde.bs.collapse正在启动，但仍然不起作用。
谢谢您
3条答案
按热度按时间disbfnqx1#
只有当卡片主体的内容比浏览器长时，才会发生这种情况。同时，只有当您使用数据父项时，才会发生这种情况。
由于卡片主体打开的卡片头位于页面上方，折叠组件将下方的所有内容推到其位置。
因此需要做出选择。要么在打开另一张卡时给予关闭打开的卡（不使用data-parent），要么使用将card-header滚动到顶部的脚本，这是我的选择。
我知道这不是你所期望的答案，但在有人找到更好的解决方案之前，这些选择是我们拥有的最好的。
yiytaume2#
我修改了hidden.bs.collapse并将其更改为showed.bs.collapse，同时将event参数添加到紧接着事件的函数（）中
似乎成功了。
参见以下工作示例：
11dmarpk3#
我实际上遇到了一个与海报类似的问题，并不能完全得到上面的答案作为解决方案。UI可能关闭，因为我没有添加我的样式表，但您可以在这里找到未修改的代码-MDBoostrap - Accordian Example
这只是一个不同的方式来应用相同的效果在引导程序。没有额外的JS需要。