试图创建一个快速的jQuery下拉菜单

am not sure if I'm doing this right, but I'm trying to create a simple drop down menu in jQuery. I basically want a div (with links) to appear once the menu item is hovered over..

我不确定我是否正确,但我正在尝试在jQuery中创建一个简单的下拉菜单。一旦菜单项悬停在上面,我基本上想要一个div(带链接)出现..

The Menu:

<ul id="mainlevel">
  <li><a href="#" class="mainlevel_home" ><span>Home</span></a></li>
  <li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li>
  <li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li>
</ul>

The Hidden Div:

隐藏的部门:

<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div>

The jQuery:

$(".mainlevel_feature-writers").hover(function(){ 
  $(".subMenu").fadeIn("slow"); 
}, function() { 
  $(".subMenu").fadeOut("slow"); 
});

Now, this fades in the hidden div and fades it out fine, but - how do I stop it from fading out if someone hovers on something inside the newly shown div?

现在,这在隐藏的div中消失并且将其淡化,但是 - 如果有人在新显示的div中的某些东西上盘旋,我该怎么阻止它消失?

Sorry if this is a really obvious question.. I am still learning! :)

对不起,如果这是一个非常明显的问题..我还在学习! :)

1 个解决方案

#1

I think you need to separate the handling of mouseover and mouseout events.

我认为你需要分开mouseover和mouseout事件的处理。

Presumably, you want the mouseover handler to be attached to the "top level" menu element, and the mouseout handler to be attached to the hidden "dropdown" div (with some state code to manage conflicts).

据推测,您希望将鼠标悬停处理程序附加到“*”菜单元素,并将mouseout处理程序附加到隐藏的“下拉列表”div(使用某些状态代码来管理冲突)。