2

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

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

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>
4

3 回答 3

2

实际上，主要问题是你有 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 似乎也不是一个很好的理由，看起来它只是一个反复出现的主题，以尽可能多地添加插件/文件/whatnot（阅读：废话）。

于 2012-07-16T00:22:04.503 回答
0

主要问题是您没有清除 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);
        });
});
于 2012-07-08T23:43:15.183 回答
0

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

于 2012-07-20T13:47:50.393 回答