如何解决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>
先感谢:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。