Я пытаюсь создать Navabar Bootstrap 5 с раскрывающимся списком, который будет отображаться при наведении курсора, и родительским элементом, который будет доступен для кликов на экранах размером более 992 пикселей.
У меня шоу при наведении работает нормально со следующим JavaScript.
document.addEventListener("DOMContentLoaded", function(){ если (window.innerWidth > 992) { document.querySelectorAll('.navbar .nav-item').forEach(function(everyitem){ Everyitem.addEventListener('mouseover', function(e){ let el_link = this.querySelector('a[data-bs-toggle]'); если (el_link! = ноль) { пусть nextEl = el_link.nextElementSibling; el_link.classList.add('показать'); nextEl.classList.add('показать'); } }); Everyitem.addEventListener('mouseleave', function(e){ let el_link = this.querySelector('a[data-bs-toggle]'); если (el_link! = ноль) { пусть nextEl = el_link.nextElementSibling; el_link.classList.remove('показать'); nextEl.classList.remove('показать'); } }) }); } }); И это прекрасно работает. У меня возникли проблемы с тем, чтобы заставить родителя перейти по URL-адресу.
Использование
$('.navbar .nav-item > a').click(function() { location.href = this.href; } }); Не работает, и мне не удалось найти подходящее решение в Интернете.
Я пробовал
document.querySelectorAll('.dropdown-menu').forEach(function(element){ element.addEventListener('click', function (e) { location.href = this.href; }); }) Это тоже не работает.
Что я делаю не так?
Изменить. Извините, вот HTML
- Родитель Саб 1
- Саб 2
- Саб 3
