Как правильно скрыть скользящее меню?

Question

У меня есть следующее меню:

<div id="menuItem">Item1</div> 

<div id="subMenu"> 
<ul> 
    <li>subitem1</li>  
    <li>subitem2</li>  
    <li>subitem3</li>  
</ul> 
</div> 
​ 

Анимированные так:

$('#menuItem').mouseenter(function() { 
    $('#subMenu').slideDown(400); 
}).mouseleave(function() { 
    $('#subMenu').hide(400); 
}); 
​ 

К сожалению, как мышь покинуть подменю, в подменю пропадает. Как сделать подменю только исчезнет, ​​когда мышь покинет элемент меню ИЛИ список подменю? Я хотел бы навести курсор мыши в подменю. Обратите внимание, что есть пробел между двумя меню.

jsFiddle here

Answer 1

Предполагая, что вы хотели сохранить точно так же HTML структуры, можно использовать следующий код:

$('#menuItem').mouseenter(function() { 
    $('#subMenu').slideDown(400); 
}).next('#subMenu').mouseleave(function() { 
    $('#subMenu').hide(400); 
}); 

Обратите внимание, что я сказал JQuery, чтобы скрыть #subMenu только тогда, когда мышь покинула #subMenu ,

Answer 2

В качестве альтернативы, если вы не хотите иметь подменю внутри элемента меню (который может испортить с помощью CSS, вы можете обернуть все в родительском DIV как:

HTML:

<div id="all"> 
    <div id="menuItem">Item1</div> 
    <div id="subMenu"> 
    <ul> 
     <li>subitem1</li>  
     <li>subitem2</li>  
     <li>subitem3</li>  
    </ul> 
    </div> 
​</div>​ 

JQuery:

$('#all').mouseenter(function() { 
    $('#subMenu').slideDown(400); 
}).mouseleave(function() { 
    $('#subMenu').hide(400); 
}); 

Answer 3

Попробуйте это:

<div id="menuItem">Item1 
    <div id="subMenu"> 
     <ul> 
      <li>subitem1</li>  
      <li>subitem2</li>  
      <li>subitem3</li>  
     </ul> 
    </div> 
</div> 

Это работает в браузере (Firefox)

Answer 4

сделать подменю на самом деле «внутри» пункта меню вы Прикрепляя событие, таким образом в/выход только событие происходит, когда пользователь фактически оставляет области меню

так:

CSS

#menuItem { 

cursor: pointer; 
width: 100px; 
} 

#menuItem .title { 
    background-color: orange; 
} 

#subMenu { 
background-color: grey; 
margin-top: 5px; 
cursor: pointer; 
display:none; 
width: 80px; 
}​ 

HTML

<div id="menuItem"> 
    <div class="title">Item1</div> 
    <div id="subMenu"> 
     <ul> 
      <li>subitem1</li>  
      <li>subitem2</li>  
      <li>subitem3</li>  
     </ul> 
    </div> 
</div>​​​​​​​​​ 

JS

$('#menuItem').mouseenter(function() { 
    $('#subMenu').slideDown(400); 
}).mouseleave(function() { 
    $('#subMenu').hide(400); 
}); 

дружеский примечание:

вы можете использовать какую-либо форму .stop(true, true) перед анимированием меню, или быстро перемещая курсор вперед и назад по меню, заставит анимацию «стекать», и это будет просто странно для пользователя. см обсуждение здесь: Where to put clearQueue in jQuery code

так будет выглядеть следующим образом:

$('#menuItem').hover(function() { 
    $('#subMenu').stop(true, true).slideDown(200); 
}, function() { 
    $('#subMenu').stop(true, true).slideUp(200); 
}); 

Answer 5

Это всегда хорошо, чтобы иметь меню и дополнительное меню внутри одного контейнера, так что вам не нужно иметь отдельную мышь обработчик при навигации подменю.

DEMO

HTML:

<div id="subMenu"> 
<div id="menuItem">Item1</div> 
<ul> 
    <li>subitem1</li>  
    <li>subitem2</li>  
    <li>subitem3</li>  
</ul> 
</div> 

JS:

$('#subMenu').mouseenter(function() { 
    $('#subMenu ul').slideDown(400); 
    isInsideSubMenu = true; 
}).mouseleave(function() { 
    $('#subMenu ul').hide(400); 
}); 

CSS:

#subMenu ul { display:none;}