JQUERY hover dropdown with hoverIntent

Question

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

.menu_img класс на изображении, который парил над начать слайд вниз списка

.page_nav класс в списке, который скользит вниз, когда .menu_img завис над.

$(document).ready(function(){ 
    $('img.menu_img').click(function() { 
    $('ul.page_nav').stop().slideDown('slow'); 
    }); 
}); 

HTML

<div id="helper_bar"> 
    <div class="page_width"> 
     <img src="images/page_nav.png" alt="page_nav" title="use this to navigate the page" class="menu_img" width="179" height="33" /> 
    </div> 
</div> 

<div class="page_width"> 
    <ul class="page_nav"> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services Offered</a></li> 
      <li><a href="#">The Team</a></li> 
      <li><a href="#">The Process</a></li> 
    </ul> 
</div> 

Это код, который у меня есть. Это работает, если вы нажмете на img, но если вы переключите .click на .hover, он будет зависать, когда вы попытаетесь перейти к li. Вот почему я ввел плагин hoverIntent, но я не уверен, как его интегрировать, чтобы получить правильное решение, которое я пытаюсь создать.

BTW Я не указал код HTML, но его простой образ и теги ul li, которые, как я знаю, работают нормально. Отображается: нет; на ul li, и я сделал кое-что, чтобы сделать это funciton должным образом в моем макете. (у меня макет немного отличается от обычного раскрывающегося списка.) В любом случае, я очень уверен, что мой CSS прав, мне просто нужно выяснить, как написать JQuery. Благодаря!

Answer 1

[Обновлено ответ]

То, что вы хотите сделать, это будет немного сложным с эффектом парения. Вот возможное решение, но вы не можете использовать hoverIntent, потому что ему нужны события, чтобы пузыриться, а mouseenter и mouseleave события не пузырятся. Однако в этом решении я включил эффект, похожий на hoverIntent. Сначала завернуть оба элемента в одном DIV с идентификатором menu:

<div id="menu"> 
    <div id="helper_bar"> ... </div> 
    <div class="page_width"> ... </div> 
</div> 

И использовать этот JS (внутри document.ready события):

var trigger = $("img.menu_img")[0], // The DOM element 
    $nav = $("ul.page_nav");  // The jQuery Wrapped DOM element 
$("#menu").mouseover(function(e){ 
    // Keep track when the mouse is over the menu area 
    if(e.target == this){ 
    $(this).data('over', true); 
    }  

    // Only show menu if the img.menu_img was what triggered the event 
    if(e.target == trigger){ 
    $nav.stop().slideDown('slow'); 
    } 
}).mouseout(function(e){ 
    if(e.target == this){ 
     var $this = $(this); 
     $this.data('over', false); 
     window.setTimeout(function(){ 
      if(!$this.data('over')) $nav.stop().slideUp('slow'); 
     }, 500); // Wait half a second to see if the mouse reenters the element 
    } 
}); 

Пожалуйста, спросите, если у вас есть вопросы или проблемы с это решение.

[Подлинный ответ]

hover никогда не будет работать на то, что вы хотите, так как ul список никогда не может быть ребенок из img. Каждый раз, когда вы перемещаетесь с img, меню будет скрываться. То, что я рекомендовал бы, что-то вроде этого (На самом деле, я бы порекомендовал вам использовать замены изображения вместо изображения, но позволяет просто сделать одну вещь за один раз):

HTML

<ul id="nav"> 
    <li><img class="menu_img" alt="Home" /> 
     <ul class="page_nav"> 
     ... 
     </ul> 
    </li> 
    .... 
</ul> 

JS

$("#nav > li").hoverIntent(function(){ 
    $('ul.page_nav', this).stop().slideDown('slow'); 
}, function(){ 
    $('ul.page_nav', this).slideUp('slow'); 
}); 

Таким образом mouseenter событие (или задержанная версия его с hoverIntent) срабатывает, когда li завис, и выиграл 't огонь снова, пока весь список не выйдет мышью.Таким образом, до тех пор, пока мышь находится над li или любым из ее детей, событие mouseout никогда не будет срабатывать, позволяя page_nav выполнять свою работу в качестве меню.