已创建 Jquery 菜单但没有任何效果

Posted 2023-02-22

【中文标题】已创建 Jquery 菜单但没有任何效果

【英文标题】：Jquery menu created and no works

【发布时间】：2012-12-15 16:51:04

【问题描述】：

我在我的网站顶部创建了自己的显示菜单脚本，但我遇到了一些问题

基本问题是

当我将鼠标放在显示菜单的链接上时，菜单第一时间就完美显示了，

但是，如果我将鼠标放在菜单显示的 div - show until - 上，此菜单将一直隐藏并且不会保留

使用这个脚本我试图显示div，当鼠标离开这个div时，隐藏它

我的脚本是这样的：

function menu(id,width,color)


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

//
//$(".m"+id).show("blind",  direction: "vertical" , 500);
//$(".m"+id).show(500);

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

e.stopPropagation();
e.stopImediatePropagation();

);

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


$(this).hide(500);
e.stopPropagation();
e.stopImediatePropagation();

);

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>

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

【参考方案1】：

你有两件事要解决：

（不回答您的问题）：您正在对mouseover 事件运行menu 函数。你在menu 上所做的就是绑定mouseover（和mouseout）。这有点多余。你应该打电话给menudocument.ready。 （这确实回答了您的问题）：只有当鼠标不在m1 和men1 之外时，您才应该隐藏菜单。

出于好奇：您为什么不使用所有现有的菜单插件？

【讨论】：

告诉我哪个插件可以作为我的脚本 5 行不再是，我只知道那个，但是如果您认为或知道一些代码可以完美，请您可以输入代码以查看问题，谢谢的，新年快乐，问候！！！

你可以google一下，会发现很多插件。你可以选择你最喜欢的一个。 bit.ly/Vf1y5b