определить статус зависания jQuery для меню

Question

Я работаю над созданием выпадающего меню с jQuery, и у меня есть вопрос. Мое меню состоит из двух частей span.menu_head (который находится в строке меню) и ul.menu_body (который содержит раскрывающиеся элементы). У меня есть следующий код JQuery:

$("span.menu_head").hover(function(){ 
    $(this).next().slideDown('medium'); 
}, function(){ 
}); 

$("ul.menu_body").hover(function(){ 
}, function(){ 
    $(this).slideUp('medium'); 
}); 

Так что, когда я парить над span.menu_head, то ul.menu_body скользит вниз, и когда я оставляю ul.menu_body, он скользит вверх. Это работает как ожидалось. Тем не менее, есть еще одна деталь, которую я пытаюсь добавить: Когда мышь покидает span.menu_head, я хочу, чтобы ul.menu_body нажал кнопкуUU, ЕСЛИ мышь над ul.menu_body. Есть ли способ в jQuery определить, находится ли мышь над определенным элементом? Или, есть ли лучший способ добиться этого эффекта?

Спасибо,

Пол

Answer 1

Я нашел решение, используя hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).

Я установил флаг, когда мышь нависает над ul.menu_body, так что я могу проверить этот флаг перед закрытием меню.

 var overBody = false; 

     function mnuOpen() { 
      $(this).next().slideDown('medium'); 
     } 
     function mnuClose() { 
      if (!overBody) { 
       $(this).next().slideUp('medium'); 
      } 
     } 

     var headConfig = { 
      over: mnuOpen, 
      timeout: 250, 
      out: mnuClose 
     } 

     $("span.menu_head").hoverIntent(config); 

     $("ul.menu_body").hover(function(){ 
      overBody = true; 
     }, function(){ 
      overBody = false; 
      $(this).slideUp('medium'); 
     }); 

Это приводит к желаемому поведению. Еще одна вещь, которую мне нужно рассмотреть: если мышь переходит из подменю обратно в заголовок, мы не хотим закрывать и снова открывать, поэтому это может потребовать установки другого флага для обнаружения этого поведения.

Paul