Jquery 只有当鼠标非常缓慢地离开div时，子菜单上的Slideup效果才有效

我有以下脚本来处理子导航菜单的上下滑动：

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

向下滑动很好，但向上滑动根本不起作用。相反，子菜单在离开.box div时突然消失了。所以我在包含.box的div中添加了4px的填充，在左侧和右侧添加了4px（这是我所能提供的）。现在，当鼠标缓慢地向左或向右离开div时，我确实获得了滑动效果，但是当以正常速度这样做时，仍然没有向上滑动。您可以看到我访问并将鼠标悬停在第二个导航项（“新闻”）上的意思

填充似乎有助于检测离开div的鼠标指针，但是slideUp函数仍然不能很好地工作，当然还有更好的解决方案吗？导航列表中“新闻”项的HTML为：

<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page">
<div class="box">
<div class="top_nav"></div>
<div class="clear">
<div class="bottom_nav"><div class="left_nav"></div><div class="center_nav"><a href="http://soteriabrighton.co.uk/news/">news</a></div><div class="right_nav"></div></a></div></div>
    <ul class="sub-menu">
    <li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page">
    <div class="box">
    <div class="top_nav"></div>
    <div class="clear">
    <div class="bottom_nav"><div class="left_nav"></div><div class="center_nav"><a href="http://soteriabrighton.co.uk/news/events/">events</a></div><div class="right_nav"></div></a></div></div>
    </li>
    </ul>
</li>

主要问题是没有清除jQuery动画队列

另外，您应该将

$j（this.find（'.sub-menu'）

存储在全局变量中

代码如下：

var subMenu; /* Global variable */

$j('body').ready(function() {
    $j('.box').hover(function() {
        if(subMenu == null)
        {
            subMenu = $j(this).find('.sub-menu');
        }
        subMenu.stop(); /* Clears animation before applying slideDown */
        subMenu.slideDown(500);
    },
        function() {
            if(subMenu == null)
            {
                subMenu = $j(this).find('.sub-menu');
            }
            subMenu.stop(); /* clears animation before applying slideUp */
            /* you might need to put a 'subMenu.show();' here in case it's not visible */
            subMenu.slideUp(500);
        });
});

---

实际上，主要的问题是你有13个CSS文件和30个javascript文件，所以你可能不知道发生了什么

禁用javascript时，您将看到在CSS中设置了一个悬停效果，在JS中设置了另一个悬停效果，它们相互干扰

删除CSS悬停函数，然后尝试：

$j('.box').on('mouseenter mouseleave', function(e) {
    $j('.sub-menu', this).stop(true, true)[e.type==='mouseenter'?'slideDown':'slideUp'](500);
});

请注意，它没有

$（'body'）。准备好了…

东西，因为这是不必要的，请将它放在

$（function（）{…}）中。

而且，不需要30个javascript文件，也不需要将每个小函数都封装在

$j（function（）{…}）中，其中一个通常就足够了

在noConflict模式下运行jQuery似乎也没有什么好的理由，看起来它只是一个重复出现的主题，尽可能多地添加插件/文件/诸如此类的东西（读：垃圾）。
检查元素中的事件。可能元素还有更多事件要处理。
谢谢。我已经添加了您的功能，但仍然没有看到正确的向上滑动子菜单，如您所见。我尝试过使用和不使用
子菜单.show（）@Nick可能与绿色悬停效果有冲突，请尝试禁用它。另外，请尝试离开子菜单.show（）；我已禁用绿色悬停效果，并包括
子菜单.show（）如您所建议，但我仍然看到相同的问题。谢谢，我可以看到禁用javascript后，子导航仍然有效，但没有jQuery中的下拉/淡入效果。看起来控制悬停效果的CSS是我正在使用的Wordpress主题的默认CSS。我正在使用子主题覆盖默认CSS。CSS和javascript文件的数量很大程度上是由于它是一个Wordpress环境。你能看到我需要更改哪个CSS来禁用悬停效果吗？我曾经尝试过使用Web Inspector为div禁用各种CSS，比如#nav li:hover，但没有成功。我想我应该提到，由于与WP插件冲突，jQuery现在在网站上被破坏了，我将不使用这种方式，以便该插件的开发人员可以查看一下。就这里所讨论的问题而言，希望这与禁用JS的效果相同，所以这对整理CSS没有任何影响。我已经将您的答案标记为正确答案，因为我认为您是对的，但我仍然不确定如何删除CSS悬停功能，因此，如果你对此有更多的建议，我很高兴听到。谢谢