我想我整天都在思考这一点。不应该这么难......
我有一个带主菜单的div它是子菜单的子菜单。我最初的问题是想要在屏幕上以绝对定位显示水平而不是垂直的子菜单，这样我就可以将它放在我想要的位置。现在我有这个烂摊子，我认为过度思考这种情况已经让我失去了它。
我只是想在将父菜单悬停在父级之后将子菜单与父级分开，然后只要你在父级或子级菜单上就保持它，并在你离开时淡出它，将子菜单附加回到家长。当鼠标悬停在具有子菜单的父级上时，徽标会淡出，当子菜单淡出时，徽标会淡入。它现在正在做什么，无论如何都会在徽标中逐渐消失，当它在子菜单上徘徊时它的真正错误，以及它有时候不会停留在它上面。
如果有一个更好的方法来定位这个，所以我不必经历这个混乱，或者只是一个更好的整体方式，请指出。
<script type="text/javascript">
jQuery(document).ready(function($){
var inEle = false;
var hideTimer;
$('.sub-menu li a').css('display', 'inline-block');
// do hover on main menu
$('.uk-navbar-nav li a').hover(
function() {
// reset everything on new hover
clearTimeout(hideTimer);
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
inEle = true;
// save the id if there is one to hide
var subID = $('body').children('ul[class*="sub-menu"]').attr('id');
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').children('ul[class*="sub-menu"]').appendTo($(this).parent().parent().find('div[id*="'+subID+'"]')).removeAttr('id');
// fade out the ul submenu
$(this).parent().parent().find('div[id*="'+subID+'"]').find('ul').fadeOut(100);
// find the div holding the ul submenu and take out its placeholder id
$(this).parent().parent().find('div[id*="'+subID+'"]').removeAttr('id');
//show submenu
if ($(this).parent().find('div').hasClass('uk-dropdown')) {
$('.logoimgcontainer img').stop(true, true).fadeOut(150);
$(this).parent().find('div').find('ul').appendTo('body').css({
'display' : 'inline-block',
'position' : 'absolute',
'left' : '0',
'right' : '0',
'top' : '90px',
'margin' : 'auto',
'width' : '300px',
'text-align' : 'center',
'z-index' : '150'
}).attr('id', $(this).text());
$(this).parent().find('div').attr('id', $(this).text());
$(this).parent().find('div').find('ul').fadeIn(1000);
}
}, function() {
// do nothing here mkay
}
);
// do hover out on main menu
$('.uk-navbar-nav li').hover(
function() {
// do nothing here k
},function() {
// check if this item has a submenu
if ($(this).find('div').hasClass('uk-dropdown')) {
// clear out the timer
clearTimeout(hideTimer);
var aID = $(this).find('a').text();
// go ahead and set it not in sub since it hovered out here
inEle = false;
// reset the timer
hideTimer = setTimeout(function() {
// make sure its not in the submenu
if (!inEle) {
//var checkUL = $('ul[id*="'+aID+'"]');
//if (!checkUL.is(":hover")) {
// hideTimer = setTimeout(function() {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(2000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('ul[id*="'+aID+'"]').appendTo('div[id*="'+aID+'"]').removeAttr('id');
// fade out the ul submenu
$(this).find('div[id*="'+aID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$(this).find('div[id*="'+aID+'"]').removeAttr('id');
//}, 1000);
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
}
);
// do hover in the submenu
$('.sub-menu').hover(
function() {
// set were in the submenu now
inEle = true;
// take out the timer for the main menu
clearTimeout(hideTimer);
}, function() {
// dont need the timeout anymore, not in submenu or main menu item
clearTimeout(hideTimer);
var ulID = $(this).attr('id');
// set were out of the submenu
inEle = false;
hideTimer = setTimeout(function() {
//var checkUL = $('.uk-navbar-nav li a:contains("'+ulID+'")');
//if (!checkUL.is(":hover")) {
if (!inEle) {
// fade in the spire logo
$('.logoimgcontainer img').stop(true, true).fadeIn(3000);
// find the ul submenu and put it back on the div in the main menu, remove the placeholder id
$('body').find('ul[id*="'+ulID+'"]').appendTo($('.uk-navbar-nav li').find('div[id*="'+ulID+'"]')).removeAttr('id');
// fade out the ul submenu
$('.uk-navbar-nav li').find('div[id*="'+ulID+'"]').find('ul').fadeOut(500);
// find the div holding the ul submenu and take out its placeholder id
$('body').find('div[id*="'+ulID+'"]').removeAttr('id');
}else clearTimeout(hideTimer); // still in the sub menu, clear the timer, handle in submenu
}, 1000);
}
);
});
</script>
答案 0 :(得分：1)
我建议使用点击而不是徘徊，因为徘徊不适用于移动设备（也就是触摸屏）。滚动你自己的菜单有点像重新发明轮子这些天。我可以推荐一些很好的基于引导程序的模板，这些模板已经内置了菜单，甚至可以“神奇地”＃34;在移动设备上变成汉堡包。但是，也许你正在努力学习，我自己写了一些菜单，并且可以给你的一条建议就是你应该使用jquery并使用mouseLeave而不是mouseOut。 mouseOut甚至不会让你到达你的下拉列表。