使用悬停意图，而不是显示/隐藏...请帮助使用更改代码

Question

我知道这个网站上有很多很棒的帮助者，我仍在学习 jquery，但我喜欢它背后的功能。最近，我创建了一个大型下拉菜单，但我开始收到很多建议使用悬停意图插件而不是使用显示/隐藏。我在试图改变我的编码以使其正常工作时迷失了...请帮助...一如既往地感谢伙计们和女孩们！

哦，我认为更改为hoverintent也将阻止溢出的发生，但我不认为我的代码正在努力阻止这种情况的发生？

我的网站...只有“关于 DKE”下拉菜单有效...

http://www.nestudiosonline.com/test .php

我的 jquery 脚本...

$(document).ready(function() {
    // shows the hidden div in the list
    $('#dave').mouseover(function() {
        $('#aboutdke').show('slow');

    });
    // hides the hide the div again for that list item
    $('#dave').mouseleave(function() {
        $('#aboutdke').hide('slow');

    });
});

这是我的 html...

<div id="pagelinks">
 <ul id="menu">
     <li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
        <li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
       (about dke div content)
            </div>
  </div></li>
        <li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
        <li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
        <li class="megamenu"><a class="links" href="#">EVENTS</a></li>
        <li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
        <li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
      </ul>
 </div>

Answer 1

在我得到真正的答案之前，有两件事：

1. 您在文档类型之后缺少开始正文标记。

2. 只有小写标签在 XHTML 中才有效。

这些事件仅针对 #aboutdke 触发，因为这是您硬编码到事件回调函数中的一个元素。尝试一些更抽象的东西：

$('#menu > li').mouseover(function() {
    $(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
    $(this).children().is('div').hide('slow');
});

这应该（如果没记错的话）适用于每个菜单项。