为什么 chrome 从下拉项中删除 bootstrap 的 .active class？

Question

我有一个带下拉菜单的导航栏，我想将其中一项标记为活动，我的 HTML 是：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="nb" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active dropdown justify-content-center text-center">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">User guide</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="link1.html">Link 1</a>
                    <a class="dropdown-item active" href="#">Active Link</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

我正在使用这些样式和脚本：

<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="CSS/my_style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function() {$('body').scrollspy({offset:0.02*window.innerHeight});})
    </script>
</head>

但是，这在 MS Edge 中有效，但由于某些原因在 chrome 中无效。加载文档后，.active class 从下拉项中消失。

Chrome：版本 77.0.3865.90（正式版）（64 位）

MS Edge：Microsoft Edge 44.18362.329.0，Microsoft EdgeHTML18.18362

知道为什么 chrome 这样做以及如何阻止它吗？

谢谢

编辑

问题似乎出在 scrollspy

<body data-spy="scroll" data-target="#side-nav" data-offset="0">

在 sidenav 上使用

        <div id="sidebar" class="col-md-3 col-lg-3 col-xl-2 d-none d-md-block">
            <nav id="side-nav" class="navbar navbar-light bg-dark sticky-top">
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link arrow" href="#top"><i class="fas fa-arrow-circle-up fa-2x"></i></a>
                    <a class="nav-link" href="#intro">Introduction</a>
                    <a class="nav-link" href="#usage">Usage</a>
                    <a class="nav-link" href="#properties">Properties</a>
                    <a class="nav-link arrow" href="#footerInfo"><i class="fas fa-arrow-circle-down fa-2x"></i></a>
                </nav>
            </nav>
        </div>

当我在开发中手动将活动 class 添加到下拉项时。工具，然后向下滚动一点 - 它在 chrome 中消失（不在 MS edge 中）。

Answer 1

... $(函数() {$('body').scrollspy({offset:0.02*window.innerHeight});})

Answer 2

请先尝试清除浏览器数据（缓存、cookie 或历史记录），然后重新测试您的代码。我已经使用您的代码创建了一个示例，似乎一切都在我这边运行良好，结果像 this。

如果仍然无法正常工作，请尝试使用 F12 开发人员工具检查 CSS，并检查您的代码，是否包含其他 JavaScript 脚本，这将删除活动 class？

Answer 3

问题是 ScrollSpy 会从目标中的所有 dropdown-item 元素中删除 active class（以便它像 this 一样工作），在大多数情况下是 body。解决方案是通过使用不同的活动 class（例如 selected）排除某些下拉菜单成为 ScrollSpy 的目标，并为新选择的 class 创建自定义 CSS .dropdown-item.selected.

为什么 chrome 从下拉项中删除 bootstrap 的 .active class？

Why chrome removes bootstrap's .active class from dropdown-item?

html

google-chrome

twitter-bootstrap

microsoft-edge