我在这里做了一个最小的片段，它从CDN加载Bootstrap 5(CSS和Bundle(。
这涉及到一个可折叠的导航栏标题，它会产生不需要的滚动行为。
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav" id="accordionSidebar">
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item" style="border: 3px solid red">
<a class="nav-link collapsed" href="#collapseTwo" data-bs-toggle="collapse"
aria-expanded="true" aria-controls="collapseTwo" style="border: 6px solid green">
<span style="border: 9px solid purple">Collapsable header</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="py-2 rounded">
<h6 class="collapse-header">Subitems</h6>
<a class="collapse-item" href="ZZZZZ-subitem-1.html">Sub-item 1</a>
<a class="collapse-item" href="ZZZZZ-subitem-2.html">Sub-item 1</a>
</div>
</div>
</li>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Content Row -->
<div class="row">
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
ABC</br>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Bootstrap core JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>太好了
当您在绿色矩形内单击时，行为将如所需。单击绿色项目时不会发生滚动。这很好，因为最终目的是在侧栏中使用它。它只是一个侧边栏的可折叠标题，然后显示子项。
不太好
但是，如果单击文本本身(紫色矩形(，则会发生滚动行为。这是不需要的。请如何防止这种情况发生？
正如这里所解释的，这是因为HTML href锚的滚动行为。相反，使用href="#" data-bs-target="#collapseTwo"或按钮而不是链接。。。
<button type="button" class="btn btn-link collapsed" data-bs-target="#collapseTwo" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseTwo" style="border: 6px solid green">
<span style="border: 9px solid purple">Collapsable header</span>
</button>
https://codeply.com/p/jMwnjoJCLJ