Защита раскрывающегося меню реализована в виде html элемента привязки (a
). В коде инициализатора присоединен тот же обработчик, что и для конечных якорей, которые реализуют фактическую навигацию.
Решение:
Не присоединяйте обработчик к этому элементу.
Кодирование: у связанного скрипта есть несколько проблем:
- Не включает jQuery, в то время как jQuery используется
- В обработчиках используется метод
.collapse
, который не определен. - Использование
.hide
(которое, вероятно, и было задумано) здесь не работает, поскольку элемент .navbar-collapse
, для которого css необходимо изменить, имеет значение свойства display
, помеченное !important
в его css переопределение настроек, созданных обработчиком кликов. - (Обработчик кликов может быть установлен в неправильный момент времени, поскольку он не синхронизирован явно c 'с деревом dom создание (хотя я не проверял это и больше не исследовал это, но обернул назначения обработчиков методом jquery
.ready
))
В приведенном ниже коде используется более конкретный c css селектор он управляет назначением свойства display: flex!important
css на панель навигации и отфильтровывает защиту раскрывающегося меню от элементов, с которыми зарегистрирован обработчик. Элемент, который должен быть скрыт, находится в восходящем обходе, начиная с элемента, получающего элемент, что может быть немного более эффективным, чем его запрос по классу css (хотя без тестов).
$(document).ready(() => {
$('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
$(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
});
});