带有hoverIntent的JQUERY悬停下拉列表

我正在创建一个下拉列表，当鼠标悬停在上面时，它会向下滑动。这是我的一些代码。我想用HoverIntent来实现这个目标

.menu_img是图像上的类，悬停在该类上可开始列表的向下滑动

.page\u nav是当.menu\u img悬停在列表上时向下滑动的类

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

HTML

这是我的密码。如果你点击img，这是可行的，但是如果你切换。点击。悬停。当你尝试去李家时，它将悬停在外面。这就是为什么我引入了hoverIntent插件，但我不确定如何集成它以获得我正在尝试创建的正确解决方案

---

顺便说一句，我没有包括HTML代码，但它是一个简单的图像和ul li标记，我知道这是工作良好。有一个显示：无；在ul上，我和李做了一些事情，使它在我的布局中正常工作。（我的布局与常规的下拉列表有点不同。）不管怎样，我非常确定我的CSS是正确的，我只需要弄清楚如何编写Jquery。谢谢

[更新答案]

你想做的是有点挑战性的悬停效果。这是一个可能的解决方案，但不能使用

hoverIntent

，因为它需要事件冒泡，而

mouseenter

和

mouseleave

事件不会冒泡。然而，我在这个解决方案中加入了类似于hoverIntent的效果。首先将这两个项目包装在一个id为

菜单的div中：

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

请询问您对此解决方案是否有疑问或问题

[原始答案]

hover
将永远无法满足您的需求，因为
ul
列表永远不能是
img
的子列表。每次离开
img
时，菜单将隐藏。我的建议是这样的（实际上，我建议您使用图像替换而不是图像，但让我们一次只做一件事）：

HTML

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

这样，当鼠标悬停
li
时，
mouseenter
事件（或带有hoverIntent的延迟版本）将触发，并且在鼠标退出整个列表之前不会再次触发。因此，只要鼠标位于
li
或其任何子项上，
mouseout
事件将永远不会触发，从而允许
页面导航作为菜单执行其工作。
你好，道格，感谢您的回复。问题是在我的设计中，我有一个按钮来激活滑梯，它位于宽度的中间：100%；一定高度的酒吧。目前，下拉菜单是从吧台后面出来的（模拟效果，实际上它只是滑动打开，直接放在吧台下面）。因此，我的图像位于包含该条的div中，而我的ul li位于（该条的）div之外。我用HTML代码更新了我原来的帖子。道格，我真的很感激。我已经按规定放进去试过了。它可以正常地向下滑动，但不能正常地滑落。它一直开着。我在firebug控制台中运行它，以查看是否有任何错误，并且它们没有显示出来。现在还不确定到底发生了什么，但我会仔细看看，并试图找出答案。非常感谢你的帮助。@Bob，我很高兴它让你走上了正确的方向。尝试删除超时和
$当您试图隔离问题时，此.data（'over'）
。我明天再回来（现在睡觉）看看你是否还有问题或意见。干杯，伙计@鲍勃，它们都在一个容器里吗？它们不在一个容器里。就在身体里面。原因是辅助线延伸了100%的屏幕宽度，页面导航从其正下方延伸。但它们是分开的。class=“page\u width”div将宽度设置为940px，并将其与中心对齐。因此，它包装了页面导航，以适应我的内容尺寸。我希望我说的有道理。谢谢你的回复！这是有道理的！我用更合适的解决方案更新了我的答案。
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
   }
});

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

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