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

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 здесь

Answer 1

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

как это:

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) перед анимацией меню или перемещениемпри быстром перемещении курсора назад и вперед по меню анимация будет «складываться», и пользователю это будет казаться странным.см. обсуждение здесь: Где поместить clearQueue в код jQuery

, чтобы оно выглядело так:

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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;}

Answer 5

В качестве альтернативы, если вы не хотите, чтобы подменю находилось в элементе меню (которое могло бы испортить ваш 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);
});

1009 *