0
我想修改相當複雜的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();
感謝您的任何建議，並幫助我學習！