JQuery 修复菜单 div 显示和隐藏答案

【问题标题】：JQuery fix menu div show and hideJQuery 修复菜单 div 显示和隐藏
【发布时间】：2012-12-16 03:26:21
【问题描述】：

我在显示菜单的 div 容器时遇到了一些问题，当我查看激活 div 以进行显示的链接时，div 显示正常，但同时隐藏而不停留，它的想法显示div 并留下来，当我出去时，div 必须隐藏

基本问题是

当我将鼠标放在显示菜单的链接上时，菜单第一时间就完美显示了，
但如果我将鼠标放在菜单显示的 div - show until - 上，此菜单会一直隐藏并且不会保留

使用这个脚本，我试图显示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>

谢谢你的帮助，新年快乐！！！

【问题讨论】：

看看这个答案。它可能会给你一些信息..http://stackoverflow.com/questions/11162387/issue-with-hide-show-jquery-on-fixed-positioned-div
我建议您使用jsFiddle.net，并重新创建代码的工作示例。

标签： jquery-ui javascript-events jquery

【解决方案1】：

删除min-height样式，尝试用javascript实现效果。

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

并用以下代码替换javascript

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

我觉得上面的代码可以去掉或者先在菜单函数中调用。因为你只是改变了元素样式的值，不需要改回来。所以我把它们去掉了。

不知道是不是你预期的效果。

【讨论】：

【解决方案2】：

对您的代码进行了一些更改。希望这对您有所帮助：-

<!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>

【讨论】：