JQuery修复菜单div显示和隐藏

我有一些显示菜单div容器的问题，当我浏览活动div的链接时显示，div显示正常，但同时隐藏并且没有停留，这个想法it's显示div和留，当我走出去的DIV这必须隐藏JQuery修复菜单div显示和隐藏

的基本问题是，

当我把我的鼠标在链接上显示的菜单中，菜单在第一时间显示完美，
但是，如果我把鼠标放在格 - 显示直到 - 菜单显示，该菜单隐藏所有的时间和不留

有了这个脚本，我试图表明div，当鼠标走出这个div的，隐藏

我的脚本是这样的：

function menu(id,width,color) 
{ 

$(".men"+id).mouseover(function() { 



$(".m"+id).css("width",""+width); 
$(".m"+id).show("slide", { direction: "up" }, 500); 
$(".m"+id).css("background-color",""+color); 



}); 

$(".m"+id).mouseout(function() { 


$(this).hide(500); 


}); 

}

CSS样式：

#content_menu 
{ 
margin-top:7px; 
position:absolute; 
min-height:50px; 
height:auto; 
border:1px solid; 
text-align:left; 
font-family:Arial; 
font-size:12px; 
z-index:2; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
filter: alpha(opacity=80); 
-moz-opacity:0.8; 
-khtml-opacity: 0.8; 
opacity: 0.8; 
} 

#content_menu_into 
{ 
position:relative; 
width:98%; 
min-height:28px; 
height:auto; 
line-height:28px; 
font-family:Arial; 
font-size:14px; 
color:#000000; 
padding-left:2%; 
text-align:left; 
}

和呼叫脚本：

<a href="#" onmouseover="javascript:menu('1','200','#000000');" class="men1"> 
    Home Web Menu 
    </a> 


    <div id="content_menu" class="m1" style="display:none;"> 
    <div id="content_menu_into"> 
    Home 
    News 
    Articles 
    Users 
    Vote 
    </div> 
    </div>

Thank's的帮助，新年快乐！

来源

2013-01-01 user1860536

看这个answer.It可以提供一些信息给你.. [http://stackoverflow.com/questions/11162387/问题与隐藏显示jQuery的 - 固定位置div]（http://stackoverflow.com/questions/11162387/issue-with-hide-show-jquery-on-fixed-positioned-div） – 2013-01-01 12:52:15

我建议你使用[jsFiddle.net]（http://jsfiddle.net/），并重新创建一个可用的代码示例。 – SeinopSys

删除min-height风格，并尝试使用javascript来实现其效果。

#content_menu 
{ 
//min-height:50px; 
}

，并用下面的代码

function menu(id,width,color) 
{ 
$(".m"+id).css("width",width); 
$(".m"+id).css("background-color",color); 
$(".men"+id).mouseover(function() { 

$(".m"+id).slideDown(500); 
}); 
$(".m"+id).mouseout(function() { 

$(this).slideUp(500); 

}); 
}

$(".m"+id).css("width",width); 
$(".m"+id).css("background-color",color);

我觉得上面的代码可以被删除或者在菜单第一个叫function.Because你只需要改变的值替换的JavaScript元素的风格，但不需要改回它。所以我删除它们。

我不知道这是否是您的预期效果。

来源

2013-01-01 13:36:25 XuHongxu

取得了您的code.Hope一些变化这可以帮助你： -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></Script> 
<script language="javascript"> 
$(document).ready(function(){ 
$("#content_menu").hide(); 
$(".men1").hover(
function(){$("#content_menu").show()}, 
function(){$("#content_menu").hide()} 
) 


}) 

</script> 
<style> 

#content_menu 
{ 
    margin-top:7px; 
    min-height:50px; 
    height:auto; 
    border:1px solid; 
    text-align:left; 
    font-family:Arial; 
    font-size:12px; 
    z-index:2; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=80); 
    -moz-opacity:0.8; 
    -khtml-opacity: 0.8; 
    opacity: 0.8; 
    width: 20%; 
} 

#content_menu_into 
{ 
    position:relative; 
    min-height:28px; 
    height:auto; 
    line-height:28px; 
    font-family:Arial; 
    font-size:14px; 
    color:#000000; 
    padding-left:2%; 
    text-align:left; 
} 


</style> 
</head> 

<body> 
<div class="men1"> 
    Home Web Menu 

    <div id="content_menu" class="m1" > 
    <div id="content_menu_into"> 
    Home 
    News 
    Articles 
    Users 
    Vote </div> 
    </div> 
</div> 



</body> 
</html>

来源

2013-01-01 13:40:18 user1941019

你可以标记变化PLZ？ – elyashiv

JQuery修复菜单div显示和隐藏

回答

相关问题