我有一个子菜单脚本插件。现在我想添加一个额外的函数。但是我有一些问题。当子菜单被打开时,我想这样做:
$("body").append('<div id="nav-overlay"></div>');
var nav = $(".submenu").height();
var hoogteNav = $("#nav").height();
$("#nav").height(nav + hoogteNav + 14);
当子菜单关闭时,我想这样做:
$("#nav-overlay").fadeOut(function() {
$("#nav-overlay").remove();
});
$("#nav").css({ height: "33px"});
但是现在我对此有问题。当子菜单打开时,将鼠标悬停在li
元素上。函数一次又一次地打开。你可以在这里看到:here
我做错了什么?
这是整个脚本:
(function($) {
//define the defaults for the plugin and how to call it
$.fn.dcMegaMenu = function(options){
//set default options
var defaults = {
classParent: 'dc-mega',
rowItems: 3,
speed: 'fast',
effect: 'fade'
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcMegaMenuObj = this;
//act upon the element that is passed into the design
return $dcMegaMenuObj.each(function(options) {
megaSetup();
function megaOver() {
var submenuNav = $('.submenu',this);
$(this).addClass('mega-hover');
$("body").append( '<div id="nav-overlay"></div>' );
var nav = $(".submenu").height();
var hoogteNav = $("#nav").height();
$("#nav").height(nav + hoogteNav + 14);
if(defaults.effect == 'fade'){
$(submenuNav).fadeIn(defaults.speed);
}
}
function megaOut(){
var submenuNav = $('.submenu',this);
$(this).removeClass('mega-hover');
$("#nav-overlay").fadeOut(function() {
$("#nav-overlay").remove();
});
$("#nav").css({ height: "33px"});
$(submenuNav).hide();
}
function megaSetup() {
var classParentLi = defaults.classParent+'-li';
var menuWidth = $($dcMegaMenuObj).outerWidth(true);
$('> li',$dcMegaMenuObj).each(function(){
//Set Width of submenu
var mainsubmenu = $('> ul',this);
var primaryLink = $('> a',this);
if ($(mainsubmenu).length > 0) {
$(primaryLink).addClass(defaults.classParent).append($arrow);
$(mainsubmenu).addClass('submenu').wrap('<div class="submenu-container" />');
// Get Position of Parent Item
var position = $(this).position();
parentLeft = position.left;
if ($('ul',mainsubmenu).length > 0){
$(this).addClass(classParentLi);
$('.submenu-container',this).addClass('mega');
$('> li',mainsubmenu).addClass('mega-hdr');
$('.mega-hdr > a').addClass('mega-hdr-a');
// Create Rows
var hdrs = $('.mega-hdr',this);
rowSize = parseInt(defaults.rowItems);
for(var i = 0; i < hdrs.length; i+=rowSize){
hdrs.slice(i, i+rowSize).wrapAll('<div class="row" />');
}
// Get submenu Dimensions & Set Row Height
$(mainsubmenu).show();
// Calc Left Position of submenu Menu
// // Get Width of Parent
var parentWidth = $(this).width();
// // Calc Width of submenu Menu
var submenuWidth = $(mainsubmenu).outerWidth(true);
var totalWidth = $(mainsubmenu).parent('.submenu-container').outerWidth(true);
var containerPad = totalWidth - submenuWidth;
var itemWidth = $('.mega-hdr',mainsubmenu).outerWidth(true);
var rowItems = $('.row:eq(0) .mega-hdr',mainsubmenu).length;
var innerItemWidth = itemWidth * rowItems;
var totalItemWidth = innerItemWidth + containerPad;
// Set mega header height
$('.row',this).each(function(){
$('.mega-hdr:last',this).addClass('last');
var maxValue = undefined;
$('.mega-hdr-a',this).each(function(){
var val = parseInt($(this).height());
if (maxValue === undefined || maxValue < val){
maxValue = val;
}
});
$('.mega-hdr-a',this).css('height',maxValue+'px');
$(this).css('width',innerItemWidth+'px');
});
// // Calc Required Left Margin
var marginLeft = (totalItemWidth - parentWidth)/2;
var submenuLeft = parentLeft - marginLeft;
// If Left Position Is Negative Set To Left Margin
if(submenuLeft < 0){
$('.submenu-container',this).css('left','0');
} else {
$('.submenu-container',this).css('left',parentLeft+'px').css('margin-left',-marginLeft+'px');
}
// Calculate Row Height
$('.row',mainsubmenu).each(function(){
var rowHeight = $(this).height();
$('.mega-hdr',this).css('height',rowHeight+'px');
$(this).parent('.row').css('height',rowHeight+'px');
});
$(mainsubmenu).hide();
} else {
$('.submenu-container',this).addClass('non-mega').css('left',parentLeft+'px');
}
}
});
// Set position of mega dropdown to bottom of main menu
var menuHeight = $('> li > a',$dcMegaMenuObj).outerHeight(true);
$('.submenu-container',$dcMegaMenuObj).css({top: menuHeight+'px'}).css('z-index','1000');
// HoverIntent Configuration
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 100, // number = milliseconds for onMouseOver polling interval
over: megaOver, // function = onMouseOver callback (REQUIRED)
timeout: 400, // number = milliseconds delay before onMouseOut
out: megaOut // function = onMouseOut callback (REQUIRED)
};
$('li',$dcMegaMenuObj).hoverIntent(config);
}
});
};
})(jQuery);
谢谢你的帮助!
问题是,megaOver函数正在为主菜单项和子菜单项触发。这导致#nav-overlay
div出现和消失。你应该把主菜单和子菜单的mouseOver函数分开。
或者你可以修改这个函数来检查div是否已经存在:
if($('#nav-overlag').length == 0){
$("body").append( '<div id="nav-overlay"></div>' );
}