Выпадающее меню JQuery hover исчезает при наведении указателя мыши на выпадающее меню

Question

Я делаю что-то немного отличное от того, что я видел, многие люди это сделали, поэтому выпадающий список является частью дочернего списка. Однако я пытаюсь работать с выпадающим меню для сестер.

Вот моя скрипка: http://jsfiddle.net/58m99wf8/

Что вы заметите, что при наведении на кнопку, появится выпадающее меню. Если вы оставите кнопку, она исчезнет, ​​что идеально. Однако, если вы наводите курсор на раскрывающееся меню, оно все еще исчезает, и это не то, что я хочу, чтобы он это делал.

Как я могу предотвратить это?

Я видел, как это работает так:

if($('#menuONE').has(e.target).length === 0) { 
     // toggle menu to close 
    } 

Однако я не понимаю, как я могу прикрепить это к подменю, а также кнопки.

Answer 1

Попробуйте

var isSiblingHovered = false; 
$('.dropdown-hover-toggle').hover(function() { 
    $(this).siblings('.dropdown-menu').slideDown(); 
}, 
function() { 
    var current = $(this); 
    setTimeout(function(){ 
     if(!isSiblingHovered){ 
      current.siblings('.dropdown-menu').stop().slideUp(); 
     } 
    }, 50); 
}); 

$('body').on("mouseleave", ".dropdown-menu", function() { 
    isSiblingHovered = false; 
    $('.dropdown-menu').stop().slideUp(); 
}); 

$('body').on("mouseenter", ".dropdown-menu", function() { 
    isSiblingHovered = true; 
}); 

EXAMPLE

Answer 2

Что вы можете сделать, это добавить меню в селектор. Я также определил меню, потому что теперь это может означать кнопку или меню, поэтому переход оттуда может быть проблематичным.

var menu = $('.dropdown-menu'); 

$('.dropdown-hover-toggle, .dropdown-menu').hover(

function() { 
    //show its sibling menu 
    menu.stop().slideDown(); 
}, 

function() { 
    //hide its sibling menu 
    menu.stop().slideUp(); 
}); 

http://jsfiddle.net/58m99wf8/1/