Bootstrap折叠滚动以打开内容

问题描述

这个让我发疯了-浪费了多个小时试图使它工作。这里有很多类似的问题，我已经尝试了所有！大多数答案都使用手风琴进行演示，但是我在下面使用带有可折叠项的按钮。我终于能够在jsfiddle / Snippet（如下）上进行此工作（排序），但是我无法将其复制到simple html page上。

毫无疑问，这将是基本的事情，但是我正在拔头发。希望这个大脑的信任能够引导我朝着正确的方向前进。

当用户单击其中一个按钮时，我希望浏览器向下滚动到打开的元素。由于一次只能打开一个元素，因此总是在同一位置。

$('.item').on('show.bs.collapse',function(e) {
  var $panel = $(this).closest('.link-item');
  $('html,body').animate({
    scrollTop: $panel.offset().top - 50
  },500);
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<section class="container d-flex flex-column h-100 justify-content-center">
  <div class="row">
    <div class="col-12  col-md-12 col-lg-6 mt-3 hero-text">
      <h1>Collapse scroll to open content</h1>
    </div>
  </div>
</section>

<section id="collapseitems" class="container mt-5">
<div class="row">
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition1" aria-expanded="true" aria-controls="condition1">One</a>
  </div>
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition2" aria-expanded="false" aria-controls="condition2">Two</a>
  </div>
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition3" aria-expanded="false" aria-controls="condition3">Three</a>
  </div>
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition4" aria-expanded="false" aria-controls="condition4">Four</a>
  </div>
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition5" aria-expanded="false" aria-controls="condition5">Five</a>
   </div>
  <div class="col-12 col-md-6">
    <a class="btn btn-primary btn-block mb-3" data-toggle="collapse" data-target="#condition6" aria-expanded="false" aria-controls="condition6">Six</a>
   </div>
</div><!--end row-->

<div class="link-item">
  <div class="container mt-5 collapse item" id="condition1" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">One</h2>
        <p class="lead">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Pellentesque posuere dolor ac varius rhoncus. Aliquam ac sagittis massa. Suspendisse in nisl vitae nulla dictum accumsan id sed ligula. Nulla nec turpis consequat,condimentum felis quis,ullamcorper lorem. Cras in mattis mi,egestas sagittis est. Orci varius natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus. Praesent accumsan aliquet lacus non euismod.</p>

        <p>Cras sed metus eu ipsum condimentum pharetra. Donec vel soDales velit. Quisque non urna eget tellus eleifend tempor. Aenean sed dolor ex. Curabitur in eleifend velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra,per inceptos himenaeos. Praesent nec soDales nisl,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
<div class="link-item">
  <div class="container mt-5 collapse item" id="condition2" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">Two</h2>
        <p class="lead">Lorem ipsum dolor sit amet,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
<div class="link-item">
  <div class="container mt-5 collapse" id="condition3" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">Three</h2>
        <p class="lead">Lorem ipsum dolor sit amet,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
<div class="link-item">
  <div class="container mt-5 collapse" id="condition4" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">Four</h2>
        <p class="lead">Lorem ipsum dolor sit amet,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
<div class="link-item">
  <div class="container mt-5 collapse" id="condition5" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">Five</h2>
        <p class="lead">Lorem ipsum dolor sit amet,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
<div class="link-item">
  <div class="container mt-5 collapse" id="condition6" data-parent="#collapseitems">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom">Six</h2>
        <p class="lead">Lorem ipsum dolor sit amet,sed facilisis lorem. </p>
      </div>
    </div>
  </div>
</div>
</section>
<section style="height:500px"></section>

Basic html version - not working!

先感谢：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

collapse twitter-bootstrap

Bootstrap折叠滚动以打开内容

问题描述

解决方法

相关问答