我刚刚发现了这个小问题，但解决方案却从我的指缝中溜走了。我有一个包含多个折叠部分的页面，我想在您单击右侧按钮时显示该页面。现在，一切都按照 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);但没有成功。
目前暂无任何回答
- 0 回答
- 0 关注
- 130 浏览
添加回答
举报
0/150
提交
取消