我想修改相当复杂的jQuery菜单。jQuery关闭由鼠标打开的子菜单
本来,它在.click上打开,但我希望它在悬停(.mouseenter)上打开。
我已经做了改变,你可以在主菜单here看到它。
问题是,当鼠标输入没有子的主链接时,任何打开的子保持打开状态。
如您所见,有一个slideUpPanel()函数。它与.click协同工作,但使用.mouseenter,移动到一个没有子链接的链接不会触发slideUpPanel()b/c无链接的链接没有类.dropdown。
我试过几件事情无济于事。我希望把这个代码放在最后 - 在mainMenu();之前。电话 - 将工作
$(".main-menu .widescreen .nav-item > a").not(".dropdown").mouseenter(function() {
slideUpPanel();
});
但它什么也没做。
这里是mainMenu();功能。从。点击到.mouseenter的变化是在第五行..
mainMenu = function() {
var dropdown_panel, main_header, main_menu_dropdown_timer, slideUpPanel, startTimer, stopResetTimer;
dropdown_panel = $(".main-menu-dropdown-panel .row");
main_header = $(".template-index .main-header");
HEADER.find(".main-menu .widescreen .dropdown > a").mouseenter(function() {
var autoHeight, curHeight, dropdown, sub_nav;
dropdown = $(this).parent();
sub_nav = dropdown.find(".sub-nav .columns");
if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu') && Modernizr.touch) {
if ($('.main-header').hasClass('dropdown-open')) {
if (dropdown.hasClass("active")) {
startTimer();
}
} else {
$('.main-header .bg').fadeIn();
}
}
if (dropdown.hasClass("active")) {
slideUpPanel();
} else if ($('.main-header').hasClass('dropdown-open')) {
dropdown_panel.find(".columns").animate({
opacity: 0
}, 200);
dropdown_panel.find('.columns').remove();
HEADER.find(".main-menu .dropdown").removeClass('active');
dropdown.addClass("active");
sub_nav.clone().appendTo(".main-menu-dropdown-panel .row");
dropdown_panel.find(".columns").delay(200).animate({
opacity: 1
}, 200);
curHeight = dropdown_panel.height();
autoHeight = dropdown_panel.css('height', 'auto').outerHeight();
dropdown_panel.height(curHeight).animate({
height: autoHeight
}, 400);
} else {
dropdown_panel.find('.columns').remove();
$('.main-header').addClass('dropdown-open');
dropdown.addClass("active");
sub_nav.clone().appendTo(".main-menu-dropdown-panel .row");
dropdown_panel.slideDown(400, function() {
return dropdown_panel.css("height", dropdown_panel.outerHeight());
});
dropdown_panel.find(".columns").delay(200).animate({
opacity: 1
}, 200);
}
return false;
});
slideUpPanel = function() {
$('.main-header').removeClass('dropdown-open');
dropdown_panel.find(".columns").animate({
opacity: 0
}, 200);
return dropdown_panel.delay(200).slideUp(function() {
HEADER.find(".main-menu .dropdown").removeClass('active');
dropdown_panel.find('.columns').remove();
return dropdown_panel.css('height', 'auto');
});
};
main_menu_dropdown_timer = '';
if (Modernizr.touch === false) {
$('.main-header').mouseenter(function() {
if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) {
$('.main-header .bg').fadeIn();
}
return stopResetTimer();
}).mouseleave(function() {
if ($('.main-header').hasClass('dropdown-open')) {
return startTimer();
} else {
if (PAGE.hasClass('template-index') && main_header.css("position") === "absolute") {
return $('.main-header .bg').stop(true, true).fadeOut();
}
}
});
}
startTimer = function() {
return main_menu_dropdown_timer = setTimeout((function() {
slideUpPanel();
if (PAGE.hasClass('template-index') && PAGE.hasClass('transparent-menu')) {
return $('.main-header .bg').delay(300).fadeOut();
}
}), 500);
};
return stopResetTimer = function() {
return clearTimeout(main_menu_dropdown_timer);
};
};
mainMenu();
感谢您的任何建议,并帮助我学习!