开发者

determine jQuery hover status for menu

I'm working on writing a drop-down menu with jQuery and I have a question. My menu is composed of two part span.menu_head (which is in 开发者_C百科the menu bar) and a ul.menu_body (which contains the drop-down items). I have the following jQuery code:

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

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

So, when I hover over the span.menu_head, the ul.menu_body slides down and when I leave the ul.menu_body, it slide up. This is working as expected. However, there's one more piece I'm trying to add: When the mouse leaves the span.menu_head, I want the ul.menu_body to slideUp, UNLESS the mouse is over the ul.menu_body. Is there a way in jQuery to determine if the mouse is over a certain element? Or, is there a better way to acheive this effect?

Thanks,

Paul


I found a solution using hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html).

I set a flag when the mouse hovers over the ul.menu_body, so that I can check this flag before closing the menu.

        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');
        });

This is producing the desired behavior. There's one more thing I need to consider: if the mouse goes from the sub menu back to the header, we don't want to close and re-open, so this might involve setting another flag to detect this behavior.

Paul

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜