Всем привет! Возникла небольшая проблема в проекте:
Создал сабменю через jquery, но работает оно очень странно. При наведении мыши на элемент сверху вниз, активный класс вешается нормально и сабменю открывается без проблем. Однако, если навести мышь снизу вверх, активный класс вешается еще и на соседний элемент, открывая и его. Причем это не пропадает до перезагрузки страницы. Пожалуйста, скажите как это исправить? Я уже всю голову сломал. Собственно, сам js:
let timeout = null;
$(menuBtns).mouseenter (function(){
this.className += " active";
if (main.classList.contains("active")) {
mainSub.classList.add("active");
}
if (about.classList.contains("active")) {
aboutSub.className += " active";
}
if (gallery.classList.contains("active")) {
gallerySub.className += " active";
}
}).mouseleave (function (){
timeout = setTimeout(() => {
this.classList.remove("active");
mainSub.classList.remove("active");
aboutSub.classList.remove("active");
}, 100)
})
$(subMenu).mouseenter (function(){
clearTimeout(timeout);
}).mouseleave (function (){
timeout = setTimeout(() => {
this.classList.remove("active");
mainSub.classList.remove("active");
aboutSub.classList.remove("active");
gallerySub.classList.remove("active");
}, 100)
})
Я не стал сюда запихивать все переменные, чтобы укоротить код, но они определены и с этим проблем нет. Собственно,
ссылка на сам проект.
