@Mikhail_Litvinov
начинающий web-разработчик

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

Всем привет!

Есть достаточно большой проект, в котором потребовалось написать выползающее меню через 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 его сделать не получится.
  • Вопрос задан
  • 66 просмотров
Решения вопроса 2
hzzzzl
@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 секунды после того как курсор уйдет из меню

}


дальше по обстоятельствам
Ответ написан
@Mikhail_Litvinov Автор вопроса
начинающий web-разработчик
Благодаря 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с.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы