Первое выпадающее меню не закрывается после наведения второго меню

Question

У меня возникает проблема при открытии раскрывающегося списка menu1 и непосредственно после наведения курсора на меню2, чтобы открыть его, не закрывая меню1. Если я открою меню1 и вывожу курсор из навигатора, чтобы закрыть выпадающее меню, а затем наведите курсор на меню2, он отлично работает. Если я перейду непосредственно из меню1 в меню2 или наоборот, выпадающее меню menu2 появится в раскрывающемся меню menu1. Я думаю, что у меня ошибка в моем html, или это может быть исправлено с помощью функции jquery, но я не знаю, как это решить. Я хочу добавить еще меню, на самом деле их всего два. Я надеюсь, что вы понимаете мою проблему, Любая помощь будет оценена

$(document).ready(function() { 
    var menu = $('.menu') 
    menu.hide(); 
    $("#mainbutton").mouseenter(function(){ 
     $(".menu").stop().slideDown("fast"); 
    }); 
    $("#nav").mouseleave(function(){ 
     $(".menu").stop().slideUp("fast"); 
    }); 

    var menu2 = $('.menu2') 
    menu2.hide(); 
    $("#secondboutton").mouseenter(function(){ 
     $(".menu2").stop().slideDown("fast"); 
    }); 
    $("#nav").mouseleave(function(){ 
     $(".menu2").stop().slideUp("fast"); 
    }); 
}); 

Here the JSFiddle

Answer 1

Я хотел бы предложить, чтобы добавить общее название класса ко всем меню .menu и конкретного выбора для каждого отдельного меню (#menu1 или .menu1), а также индикатор активного состояния .active. Таким образом, вы можете просто закрыть все .menu.active

увидеть следующую скрипку как простое доказательство концепции: https://jsfiddle.net/ad3a5qyw/2/

EDIT: Я отведенной скрипку, так что вы можете добавить data-menu атрибуты к nav-items, показывая, что соответствующее меню.

Answer 2

Я вижу, что происходит здесь:

Это легко с JQuery и кодом Вы написали уже, и вот пример с новым пунктом меню, чтобы показать, как легко: https://jsfiddle.net/xyqoj24m/2/

Что происходит то, что функции mouseleave выполняются только тогда, когда мышь покидает весь#nav элемент. Итак, что нужно сделать, это обработать скрытие/показ меню таким образом:

1. Когда мышь нависает над элементом меню, закройте все остальные выпадающие списки и покажите правильный.
2. Когда мышь покидает раскрывающийся список или элемент меню, закройте раскрывающееся меню.

Взгляните на этот Javascript и посмотреть, что означает:

$("#mainbutton").mouseenter(function(){ 
     $(".menu").stop().slideDown("fast"); 
     $(".menu2").stop().slideUp("fast"); 
     $(".menu3").stop().slideUp("fast"); 
    }); 

    $("#secondbutton").mouseenter(function(){ 
     $(".menu2").stop().slideDown("fast"); 
     $(".menu").stop().slideUp("fast"); 
     $(".menu3").stop().slideUp("fast"); 
    }); 

    // leave the first menu dropdown 
    $("#mainbutton, .menu").mouseleave(function() { 
    $(".menu").stop().slideUp("fast"); 
    }); 

    // leave the second menu dropdown 
    $("#secondbutton, .menu2").mouseleave(function() { 
    $(".menu2").stop().slideUp("fast"); 
    }); 

Не стесняйтесь задавать вопросы!