【问题标题】：Clicking text inside data-bs-toggle="collapse" scrolls down to children when clicking on text单击 data-bs-toggle="collapse" 内的文本单击文本时向下滚动到子级
【发布时间】：2021-04-03 11:51:42
【问题描述】：

我在这里做了一个最小的 sn-p，它从 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>

很棒

当您在 绿色矩形 内单击时，行为如您所愿。单击绿色项目时不会发生滚动。这很棒，因为最终目的是在侧栏中使用它。它只是侧边栏的可折叠标题，然后显示子项。

不太好

但是，如果单击文本本身（紫色矩形），则会发生滚动行为。这是不希望的。请问如何预防？

【问题讨论】：

回复或接受答案，以便其他人知道已解决的问题

标签： twitter-bootstrap navbar collapse bootstrap-5

【解决方案1】：

作为explained here，这是因为 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

【讨论】：