Почему Chrome удаляет загрузочный класс .active из dropdown-item? - PullRequest
Новая
       41

Почему Chrome удаляет загрузочный класс .active из dropdown-item?

0 голосов
/ 01 октября 2019

У меня есть панель навигации с раскрывающимся списком, и я хочу, чтобы один из ее элементов был помечен как активный, мой 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 исчезает из выпадающего элемента после загрузки документа.

Chrome : версия 77.0.3865.90 (официальная сборка) (64-разрядная версия)

MS Edge : Microsoft Edge 44.18362.329.0, Microsoft EdgeHTML 18.18362

Есть идеи, почему Chrome это делает и как его остановить?

Спасибо

РЕДАКТИРОВАТЬ

Проблема, кажется, в прокрутке 

<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>

Когда я добавляю активный класс в выпадающий список-вопрос вручную в dev. инструменты, а затем немного прокрутите вниз - он исчезает в Chrome (не в MS edge).

Ответы [ 2 ]

0 голосов
/ 01 октября 2019

Пожалуйста, попробуйте сначала очистить данные браузера (кеш, cookie или историю), а затем повторно протестировать свой код. Я создал пример с использованием вашего кода, кажется, что все работает хорошо на моей стороне, результат как this .

Если все еще не работает, попробуйте использовать инструменты разработчика F12, чтобы проверить CSS и проверить свой код, содержит ли он другой сценарий JavaScript, который удалит активный класс?

0 голосов
/ 01 октября 2019

... $ (function () {$ ('body'). Scrollspy ({offset: 0.02 * window.innerHeight});})

...