Как исправить submenu на JS?

Question

[Михаил Литвинов]

Всем привет!

Есть достаточно большой проект, в котором потребовалось написать выползающее меню через JS, а не через hover. В целом, оно относительно готово, однако при отводе мыши с кнопки сабменю закрывается, что не позволяет его использовать. Вот код самого JS:

let menuBtns = document.getElementsByClassName("menu-btn");
let main = document.getElementById("main");
let about = document.getElementById("about");
let gallery = document.getElementById("gallery");
let forWomen = document.getElementById("forwomen");
let forMen = document.getElementById("formen");
let baby = document.getElementById("baby");
let blog = document.getElementById("blog");
let mainSub = document.getElementById("main-sub");
let aboutSub = document.getElementById("about-sub");
let gallerySub = document.getElementById("gallery-sub");
let forWomenSub = document.getElementById("forwomen-sub");
let forMenSub = document.getElementById("formen-sub");
let babySub = document.getElementById("baby-sub");
let blogSub = document.getElementById("blog-sub");
var i;

for (i=0; i<menuBtns.length; i++) {
        menuBtns[i].addEventListener('mouseenter', openSubMenu);
        menuBtns[i].addEventListener('mouseleave', closeSubMenu);
    }

function openSubMenu() {
    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";
    }
    if (forWomen.classList.contains("active")) {
    forWomenSub.className += " active";
    }
    if (forMen.classList.contains("active")) {
    forMenSub.className += " active";
    }
    if (baby.classList.contains("active")) {
    babySub.className += " active";
    }
    if (blog.classList.contains("active")) {
    blogSub.className += " active";
    }
}

function closeSubMenu() {
    this.classList.remove("active");
    mainSub.classList.remove("active");
    aboutSub.classList.remove("active");
    gallerySub.classList.remove("active");
    forWomenSub.classList.remove("active");
    forMenSub.classList.remove("active");
    babySub.classList.remove("active");
    blogSub.classList.remove("active");
}

И, собственно, весь проект.

Что там нужно исправить, чтобы меню закрывалось, если мышь уходит выше кнопки или ниже самого сабменю?
Пожалуйста, не кидайтесь тапками, я только начал осваивать JS и пока что не особо хорошо его понимаю.

P.S. через hover его сделать не получится.

Comments

[WapSter]

Тут не js виноват, а верстка mouseener/leave работает точно также как и hover

[Михаил Литвинов]

я понимаю, но с hover, вроде как, активный класс не поставишь.

Answer 1

[hzzzzl]

попробуй добавить таймаут, что-то в духе

.... 
let timeout = null

function openSubMenu() {
// если курсор опять в меню, то очищаем таймаут
clearTimeout(timeout)
..
}

function closeSubMenu() {

timeout = setTimeout(() => {
    this.classList.remove("active");
    mainSub.classList.remove("active");
    aboutSub.classList.remove("active");
    gallerySub.classList.remove("active");
    forWomenSub.classList.remove("active");
    forMenSub.classList.remove("active");
    babySub.classList.remove("active");
    blogSub.classList.remove("active");
}, 2000)   // через 2 секунды после того как курсор уйдет из меню

}

дальше по обстоятельствам

Comments

[Михаил Литвинов]

не помогает( в целом, timeout ставится на 2с, но этот отчет не обнуляется, когда курсор в сабменю..

Можно ли как-то добавить условие проверки курсора? и если курсор находится в, допустим, диве "sub-menu". то счетчик обнуляется?
просто видел подобную менюшку где-то, но не мог посмотреть, как оно работает..

Answer 2

[Михаил Литвинов]

Благодаря hzzzzl нашел решение:

Сначала ввел новую переменную

let subMenu = document.getElementsByClassName("sub-nav");

После, с помощью JQuery пишем функцию

$(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");
        forWomenSub.classList.remove("active");
        forMenSub.classList.remove("active");
        babySub.classList.remove("active");
        blogSub.classList.remove("active");
    }, 100)
})

Тут как раз и определяем, что когда мышь заходит внутрь блока меню, очищаем таймаут, а когда покидает его - устанавливаем в 0.1с.