Javascript 防止页面在折叠的手风琴部分上向上滚动。引导程序4

这是一个引导4手风琴，身体部分比平常要大，这就是为什么当部分折叠到下面的内容时，它会随之向上滚动

我用这段代码来滚动到点击的标题顶部，并取消之前打开的部分崩溃导致的滚动

但它似乎在前一个崩溃之前运行。 我在互联网上进行了研究，但找不到解决方案

代码有点长，共享相关的代码片段。还可以在单击标题时使用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>

成功：功能（res）{
让resultHtml=`；
for（设i=0；i

显示。bs.collapse

和

隐藏。bs.collapse

对我不起作用。

show.bs.collapse

和

hidde.bs.collapse

正在启动，但仍不工作

---

谢谢

我修改了hidden.bs.collapse并将其更改为show.bs.collapse，并在事件发生后立即将事件参数添加到函数（）中

 $('#accordion').on('shown.bs.collapse', function(event) {

似乎是他们干的

请参见下面的工作示例：

商业信息
.放置图标{
高度：42px；
}
.查看用户图片{
宽度：42px；
垂直对齐：中间对齐；
}
.手风琴加载{
最大宽度：350px；
}
装载机控制器{
对齐项目：居中；
}
展示评论
播放新闻
哈迪斯
评级：
哈迪[拉合尔]
地址：巴基斯坦旁遮普省拉合尔市巴基斯坦拉合尔市古尔贝格III区C 2号MM Alam路

Alexa排名：126275

新闻
哈迪的员工在夜间存款时被抢——黎巴嫩企业







Carl's Jr.，Hardee's将Froot Loops迷你甜甜圈添加到菜单中——它们的味道就像《今日美国》中的麦片




赢得一场电视比赛！哈迪的超级粉丝大赛！-WWBT NBC12新闻




哈迪的肝炎恐慌导致2000人接受治疗。现在，顾客要求赔偿。-夏洛特观察者




这名男子被送往医院，警方在市中心比林斯哈迪的《比林斯公报》刺伤后展开调查




哈迪斯希望甲肝爆发后集体诉讼被驳回-华盛顿州立大学夏洛特分校




Carl's Jr.，Hardee's将水果圈迷你甜甜圈添加到其菜单中-ABC行动新闻




哈迪推出新的Froot Loops甜甜圈-wtkr.com




通缉：涉嫌穿着哈迪制服抢劫Verizon商店的嫌疑人-KMOV.com




建筑快餐
评级：
建筑快餐[拉合尔]
地址：巴基斯坦旁遮普省拉合尔市穆斯塔法镇Hadayatullah区块Hidayatullah区块

电话：03214880266

评论
法鲁克·艾哈迈德

Tower Burger是事实上，我遇到了与海报类似的问题，无法将上述答案作为解决方案用于我。UI可能会关闭，因为我没有添加样式表，但您可以在此处找到未修改的代码-


问：这是一个手风琴的例子吗？
答复
是的，事实上这是我在网上找到的一个手风琴的例子

这只是在引导中应用相同效果的另一种方式。不需要额外的JS。
仅当卡体的内容比浏览器长时才会出现这种情况。
同时，只有在使用父数据时才会发生这种情况

由于带有打开卡片主体的卡片标题位于页面上方，折叠组件将下方的所有内容向上推到其位置。在某种程度上，折叠组件完成了它应该做的事情


<div class="accordion" id="accordionExample">
  <div class="header-card" id="headingOne">
      <h5 class="mb-0">
    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne"
        aria-expanded="false" aria-controls="collapseOne">

        Q: Is This An Accordian Example?
      </button>
    </h5>
  </div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
  data-parent="#accordionExample">
  <div class="card-body">
    <h5><span class="label label-primary">Answer</span></h5>
      Yes In Fact It Is An Accordian Example I Found On The Internet
    </div>
  </div>
</div>