jquery - 鼠标离开子菜单时隐藏子菜单

Question

我想创建一个当鼠标悬停在菜单项上时出现的子菜单。我遇到一个问题，当鼠标离开子菜单时，我希望子菜单消失，例如鼠标移动到网站的底部或右侧或左侧。

这是我的菜单脚本，我在 jsfiddle http://jsfiddle.net/2jUQS/1/中制作了我的菜单的样本

<div id="header">
   <ul id="menu">
    <li>
        <a href="#" class="wordsMenu">About Company</a>
    </li>
    <li>
        <a href="#" class="galaryMenu">Gallary</a>
    </li>

 </ul>
</div>
    <div id="submenus">
         <div id="galarySubMenu" class="subMenuContainer">
    <ul class="subMenuList">
        <li><a href="PhotoGallery.php">Photo Gallary</a></li>
        <li><a href="videoGallery.php">Video Gallary</a></li>
    </ul>
</div>

</div>

这是脚本

$("document").ready(function(){


  $("a.wordsMenu").bind( 'mouseover',function(){
    $("#galarySubMenu").fadeOut("fast");
  });

 $("a.galaryMenu").bind( 'mouseover',function(){


    $("#galarySubMenu").css("display","block");
    var margin_top = $("#header").height();
    var testMarginTop=parseInt($("#galarySubMenu").css("top"));
    if(testMarginTop<0){
        $("#galarySubMenu").animate({
            'top':margin_top-2
        }, {
        'duration':500,
        queue:false
    });
    }
    else{
        $("#galarySubMenu").animate({
            'top':'-300'
        },  {
        'duration':500,
        queue:false
    });
    }
});

/*
 $(".subMenuList").mouseout(function(){
      $("#galarySubMenu").fadeOut("fast");
});
*/

 });

Answer 1

将此附加到您的jQuery代码

    $("#submenus").on('mouseleave',function(){
        $("#galarySubMenu").animate({
                'top':'-300'
            },  {
            'duration':500,
            queue:false
        })
    })

希望这可以帮助

我刚刚在整个子菜单 div 上添加了一个处理程序，当鼠标离开时它会淡出