我想创建一个鼠标悬停在菜单项上的子菜单。我遇到一个问题,当鼠标离开子菜单时,我希望子菜单消失,例如鼠标移动到网站的底部或右侧或左侧。
这是我的菜单的脚本,我在jsfiddle http://jsfiddle.net/2jUQS/1/
中制作了一个菜单的sapmle<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");
});
*/
});
答案 0 :(得分:0)
将此附加到jquery代码
$("#submenus").on('mouseleave',function(){
$("#galarySubMenu").animate({
'top':'-300'
}, {
'duration':500,
queue:false
})
})
希望这会有所帮助
我刚刚在整个子菜单div上添加了一个处理程序,当鼠标离开它时淡出