jquery - 仅当鼠标非常缓慢地离开 div 时，子菜单上的滑动效果才起作用

Question

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

$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时，我确实得到了向上滑动的效果，但是当以正常速度这样做时，仍然没有向上滑动。您可以通过访问 this page 明白我的意思。 ，并将鼠标悬停在第二个导航项(“新闻”)上。

padding似乎有助于检测鼠标指针离开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>

Answer 1

实际上，主要问题是您有 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').ready... 内容，因为这是不必要的，请将其放入 $(function() {...})相反。

此外，不需要 30 个 javascript 文件，并且您不必将每个小函数都包装在 $j(function() {...}); 中，其中一个应该通常就足够了。

在无冲突模式下运行 jQuery 似乎也没有什么充分的理由，它看起来只是一个反复出现的主题，以尽可能多地添加插件/文件/什么(阅读:废话)。