子菜单上的上滑效果仅在鼠标非常缓慢地离开 div 时才有效

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

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

向下滑动工作正常，但向上滑动根本不起作用。相反，子菜单在离开 .boxdiv 时突然消失了。所以我在包含 .box 的div 中添加了 4px 的填充，左右添加 4px（这是我所能节省的！现在，当鼠标缓慢地向左或向右离开div 时，我确实会获得 slideUp 效果，但是当以正常速度这样做时，仍然没有向上滑动。您可以通过访问此页面并将鼠标悬停在第二个导航项（"新闻"）上来理解我的意思。

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

实际上，主要问题是你有 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() {...}) instead.

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

在

noConflict模式下运行jQuery似乎也没有很好的理由，看起来它只是一个反复出现的主题，尽可能多地添加插件/文件/任何东西（阅读：废话）。

主要问题是你没有清除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);
        });
});

检查元素中的事件。可能元素有更多的事件要处理。

相关内容

最新更新

热门标签：