在子菜单脚本中创建一个额外的函数

Make a extra function in submenu script

本文关键字:一个 函数 菜单 脚本 创建      更新时间:2023-09-26

我有一个子菜单脚本插件。现在我想添加一个额外的函数。但是我有一些问题。当子菜单被打开时,我想这样做:

$("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-overlaydiv出现和消失。你应该把主菜单和子菜单的mouseOver函数分开。

或者你可以修改这个函数来检查div是否已经存在:

if($('#nav-overlag').length == 0){
   $("body").append( '<div id="nav-overlay"></div>' );
}