Bootstrap Collapse 如果位于窗口屏幕下方则不显示
我刚刚发现了这个小问题，但解决方案却从我的指缝中溜走了。我有一个包含多个折叠部分的页面，我想在您单击右侧按钮时显示该页面。
现在，一切都按照 Bootstrap 和 Js 库完美运行，但我注意到，当你的屏幕不够大时，你看不到 div 展开/显示。
下面是来自 w3c 学校的简单代码，该代码适用于此示例。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collaps 1</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo1" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<h2>Collaps 2</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Simple collapsible</button>
<div id="demo2" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</body>
</html>
我还尝试使用一些暗示scrollTop的js函数，就像那样
$('html,body').animate({scrollTop: $('#demo3).offset().top -200}, 500);但没有成功。
慕姐42086260回答
-
开满天机
正如Bootstrap 折叠文档中提到的，您可以使用 Bootstrap 折叠事件在 div 展开时滚动页面。JSFiddle：https://jsfiddle.net/35oz96qe/$(function() { $('#demo3').on('shown.bs.collapse', function() { $('html,body').animate({ scrollTop: $('#demo3').offset().top - 200 }, 500); });});<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script></head><body> <div class="container"> <h2>Collaps 1</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo1">Simple collapsible</button> <div id="demo1" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <h2>Collaps 2</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo2">Simple collapsible</button> <div id="demo2" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <h2>Collaps 3</h2> <p>Click on the button to toggle between showing and hiding content.</p> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo3">Simple collapsible</button> <div id="demo3" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div></body></html>
随时随地看视频慕课网APP
相关分类
Html5