导航项上的悬停功能不起作用答案

【问题标题】：Hover function on nav item not working导航项上的悬停功能不起作用
【发布时间】：2012-07-08 02:33:36
【问题描述】：

我有以下悬停脚本应该处理导航栏中子菜单的向下和向上滑动：

$j('body').ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').slideDown("slow");
    },
        function() {
            $j(this).find('.sub-menu').slideUp("slow");
        });
});

它向下滑动很好，但由于某种原因它没有向上滑动，而是在离开 div 时消失了。

您可以在this page 上看到正在运行的导航项目，特别是在“新闻”项目上，它有一个活动页面的下拉菜单。由于网站正在开发中，您需要输入以下凭据：

用户名：访客

密码：stackoverflow

【问题讨论】：

标签： jquery menu navigation slidedown

【解决方案1】：

试试这个：

$j(document).ready(function() {
    $j('.menu-item').hover(function() {
        $j(this).find('.sub-menu').stop().slideToggle("slow");
    });
});

你应该相对定位元素：

.sub-menu {
   position: relative;
}

【讨论】：

我认为没有问题，因为他说slideDown 工作正常
请注意，将 body 选择器更改为 document 不会有任何区别 - 您可以选择任何元素，ready 事件处理程序将始终在 DOM 就绪时执行。
恐怕这个脚本的结果相同，div 就消失了。由于我在其他情况下使用了原始问题中的脚本，所以我有点困惑。
不，恐怕这无济于事。由于我使用的 Wordpress 主题的默认 css，导航项已经有 position:absolute：#nav ul, #nav .sfhover ul ul, #nav :hover ul ul {left: -9999px;position: absolute;}
@Nick 问题肯定与 CSS 有关。

【解决方案2】：

$j('.menu-item').mouseover(function() {
    $j(this).find('.sub-menu').slideDown("slow");
});
$j('.menu-item').mouseout(function() {
    $j(this).find('.sub-menu').slideUp("slow");
});

【讨论】：

谢谢，但是当我将鼠标悬停在 div 上时，我会上下滑动重复