Question

好吧，我做了这个导航，在某些位置有子导航。目前触发器是主菜单项。现在，这适用于显示菜单的所有目的。当我关闭主菜单项时，子菜单项关闭。我试着把它放在一个间隔给它一秒钟来捕捉一个可能越过子菜单项的人的实例，但这本身就会引起问题，特别是如果这个人同时翻过另一个菜单。我已经把自己搞砸了，想不出更好地处理这个问题的方法..所以这是现有的代码：

var menuTimeout = '';
$('.nav_click').bind({
mouseover: function(){
if($(this).hasClass('submenus') == true){
var whichMenu = $(this).attr('id');
var displayMenu = '';//yes its blank for a reason
if(whichMenu == 'navi2'){displayMenu = 'menu1';}
if(whichMenu == 'navi3'){displayMenu = 'menu2';}
if(whichMenu == 'navi4'){displayMenu = 'menu3';}
if(whichMenu == 'navi5'){displayMenu = 'menu4';}
if(displayMenu != '')
{
var leftOffset = ($(this).position().left-35);
var topOffset = ($(this).offset().top+$(this).height()+10);
$('#'+displayMenu).css({"display":"block", "position":"absolute", "left":leftOffset+"px", "top":topOffset+"px"});
}
}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 -63px"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px -63px"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px -63px"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px -63px"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px -63px"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px -63px"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px -63px"});}
},
mouseout: function(){
if($('.submenublock').is(":visible") == true){menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 1500);}
var menuitem = $(this).attr('id');
if(menuitem == "navi1"){$(this).css({"background-position":"0 0"});}
if(menuitem == "navi2"){$(this).css({"background-position":"-100px 0"});}
if(menuitem == "navi3"){$(this).css({"background-position":"-230px 0"});}
if(menuitem == "navi4"){$(this).css({"background-position":"-420px 0"});}
if(menuitem == "navi5"){$(this).css({"background-position":"-524px 0"});}
if(menuitem == "navi6"){$(this).css({"background-position":"-638px 0"});}
if(menuitem == "navi7"){$(this).css({"background-position":"-737px 0"});}
},
click: function(){
window.location = $(this).attr('rel');
}
});
$('.submenublock ul').bind({
mouseover: function(){
clearInterval(menuTimeout);
},
mouseout: function(){
menuTimeout = setInterval(function() {$('.submenublock').fadeOut('slow').css({"display":"none"}); clearInterval(menuTimeout);}, 500);
}
});

这里是它目前居住的网站，目的是为了看到乱七八糟的行动。 http://kansasoutlawwrestling.com/

修改

这是一个JS小提琴版 http://jsfiddle.net/WveqN/

编辑2 我偏离CSS选项的主要原因是因为有多个鼠标上/下输入/离开事件从主菜单项改变到另一个版本通过sprite弹出菜单弹出如果有弹出的话。

Answer 1

@chris，有很多代码可以通过这里跋涉而没有任何html备份它所以我会给你我的通用答案。

为什么不使用已经为您提供此菜单的jQuery插件你想要的效果？
或尝试在http://jsfiddle.net/上发布此代码和所有代码，以便这样做每个人都可以使用代码并找到解决方案吗？

http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/是一个列出了一些免费菜单插件的页面。

Jquery mouseover / out问题

1 个答案: