Question

我正在编写一个带有jQuery的下拉菜单，我有一个问题。我的菜单由两部分span.menu_head（位于菜单栏中）和一个ul.menu_body（包含下拉项）组成。我有以下jQuery代码：

$("span.menu_head").hover(function(){
    $(this).next().slideDown('medium');
}, function(){
});

$("ul.menu_body").hover(function(){
}, function(){
    $(this).slideUp('medium');
});

所以，当我将鼠标悬停在span.menu_head上时，ul.menu_body向下滑动，当我离开ul.menu_body时，它会向上滑动。这是按预期工作的。但是，还有一件我要添加的内容：当鼠标离开span.menu_head时，我希望ul.menu_body可以滑动，除非鼠标位于ul.menu_body之上。有没有办法在jQuery中确定鼠标是否超过某个元素？或者，有没有更好的方法来实现这种效果？

谢谢，

保罗

Answer 1

我找到了使用hoverIntent（http://cherne.net/brian/resources/jquery.hoverIntent.html）的解决方案。

当鼠标悬停在ul.menu_body上时我设置了一个标志，这样我就可以在关闭菜单之前检查这个标志。

        var overBody = false;

        function mnuOpen() {
            $(this).next().slideDown('medium');
        }
        function mnuClose() {
            if (!overBody) {
                $(this).next().slideUp('medium');
            }
        }

        var headConfig = {
            over: mnuOpen,
            timeout: 250,
            out: mnuClose
        }

        $("span.menu_head").hoverIntent(config);

        $("ul.menu_body").hover(function(){
            overBody = true;
        }, function(){
            overBody = false;
            $(this).slideUp('medium');
        });

这产生了期望的行为。还有一件事我需要考虑：如果鼠标从子菜单返回到标题，我们不想关闭并重新打开，因此这可能涉及设置另一个标志来检测此行为。

保

确定菜单的jQuery悬停状态

1 个答案: