Добавить класс при наведении с помощью JavaScript
Я хочу добавить класс в ul, который находится внутри моего единственного элемента li в nav. Моя проблема в том, что я хочу показать список при наведении курсора, а затем щелкнуть что-то по нему, но когда я вводю мышь, отображается это меню li, и когда я хочу спуститься и щелкнуть что-то, меню исчезает. Я хочу сделать это на ванильном JavaScript.
document.addEventListener('DOMContentLoaded', function () {
var dropdownItem = document.querySelector('.dropdown-item');
var dropdown = document.querySelector('.dropdown');
dropdownItem.addEventListener('mouseenter', function (e) {
dropdown.classList.add('dropdown-show');
});
dropdownItem.addEventListener('mouseleave', function () {
dropdown.classList.remove('dropdown-show');
})
}) .menu {
list-style: none;
display: flex;
width: 30%;
justify-content: space-between;
align-items: center;
}
.menu li {
position: relative;
}
.menu li a {
color: #999;
text-decoration: none;
}
.menu .dropdown-item {
position: relative;
}
.menu .dropdown-item .dropdown {
position: absolute;
list-style: none;
top: 5px;
padding-top: 40px;
left: -30px;
visibility: hidden;
opacity: 0;
transition: 0.3s;
}
.menu .dropdown-item .dropdown .triangle {
border: 10px solid transparent;
border-bottom-color: #000;
width: 0;
top: 20px;
left: 50%;
transform: translateX(-50%);
position: absolute;
}
.menu .dropdown-item .dropdown.dropdown-show {
opacity: 1;
visibility: visible;
}
.menu .dropdown-item .dropdown li {
background-color: #000;
padding: 10px 20px;
font-weight: lighter;
}<ul class = "menu">
<li class = "dropdown-item"><a href = "#">O Firmie</a>
<ul class = "dropdown">
<div class = "triangle"></div>
<li><a href = "#">Aktualności</a></li>
<li><a href = "#">Nasz team</a></li>
<li><a href = "#">Historia</a></li>
</ul>
</li>
<li><a href = "#">Galeria</a></li>
<li><a href = "#">Kontakt</a></li>
</ul>Вероятно, вы могли бы сделать это полностью с помощью CSS, если вы просто хотите показать / скрыть что-то.
@DomenikReitzner Я знаю, как это сделать в css, но мне нужно сделать это с помощью JS, я имею в виду, что кто-то хочет :)
Можете ли вы изменить его, чтобы включить обычный CSS, чтобы он мог работать во фрагменте?
Собирался написать то же самое ....
Готово, можете проверить сейчас?
Ага - теперь это работает, как я ожидал. Попробуйте запустить фрагмент и сообщите нам, что с ним не так.
Лол ... Почему в моем браузере не работает ?? Я скопировал код, кто-нибудь может мне объяснить?
Выполняется ли сценарий до того, как меню будет добавлено на страницу?
@ Freestyle09 какой браузер вы используете? Не могу воспроизвести
Google Chrome, и я чувствовал, что он должен работать, но не знаю, почему это не так
Извини - не обращай на меня внимания. Не обратил внимания на обработчик DOMContentLoaded.
Лол, я добавил z-index, и он работает ... Каким-то образом другой div заблокировал его ... Лол, я не могу поверить в то, что вижу ... Кто-то может добавить это в качестве ответа
Я использую firefox и запускаю ваш код, он работает правильно! Я не могу понять твою проблему!
Нет, вы его нашли, поэтому никто больше не должен его добавлять. Добавь сам.
И с браузером Chrome у меня тоже не было проблем
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы можете использовать что-то вроде этого:
<ul class = "dropdown" onmouseover = "hoverTrue($event)" onmouseout = "hoverOut($event)">
function hoverTrue(event) {
event.target.style.display = 'block';
//or add class
event.target.setAttribute('class', 'something');
}
function hoverOut(event) {
event.target.style.display = 'none';
//or add class
event.target.setAttribute('class', 'something');
}
Если вы хотите использовать переход, вы не можете стилизовать отображение
@ Freestyle09 можно использовать opacity и pointer-events: none
Это не актуально. Код OP действительно работает (без простого использования встроенных обработчиков, которые ничего не меняют).
Z-index по умолчанию моего li каким-то образом находился под другим div ...
.menu {
list-style: none;
display: flex;
width: 30%;
justify-content: space-between;
align-items: center;
z-index: 999;
}
Теперь он работает отлично, и меню не исчезает при отпускании мыши в этом меню.
Спасибо ребята за помощь
Используйте событие «mouseover» вместо «mouseenter» и «mouseout» вместо «mouseleave».
напишите console.info ('hi') в событии наведения курсора мыши, и вы увидите, почему бы и нет
С вашим SCSS много чего происходит, и он не работает в jsfiddle. Тем не менее, я смог получить базовую функциональность, которую вы искали, работая с этим небольшим фрагментом.
Проблема с вашим кодом заключается в том, что вы добавляете событие mouseleave в тот самый элемент (dropdown-item), который показывает ваше раскрывающееся меню в первую очередь. Событие mouseleave должно быть в родительском (раскрывающемся списке).
Вот код:
document.getElementsByClassName("dropdown-item")[0].addEventListener("mouseover", function(e) {
const parent = e.target.parentElement;
if (parent && parent.tagName === "LI" && parent.classList.contains("dropdown-item")) {
const parent = e.target.parentElement;
parent.children[1].classList.add("active");
}
});
document.getElementsByClassName("dropdown")[0].addEventListener("mouseout", function(e) {
e.target.classList.remove("active");
});.dropdown {
display: none;
}
.active {
display: block;
}<ul class = "menu">
<li class = "dropdown-item"><a href = "#">O Firmie</a>
<ul class = "dropdown">
<div class = "triangle"></div>
<li><a href = "#">Aktualności</a></li>
<li><a href = "#">Nasz team</a></li>
<li><a href = "#">Historia</a></li>
</ul>
</li>
<li><a href = "#">Galeria</a></li>
<li><a href = "#">Kontakt</a></li>
</ul>* Обратите внимание, что это дает вам быстрое представление о том, как это сделать. Это ни идеальный, ни эффективный код.
Почему бы не использовать для этого css?