サブメニュースクリプトで余分な機能を作成する

Question

サブメニュースクリプトプラグインがあります。今私は余分な機能を追加したいと思います。しかし、私はいくつかの問題があります。

$("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); 

感謝！

Answer 1

問題は、メガオーバー機能がメインメニュー項目とサブメニュー項目に対して起動していることです。それによって#nav-overlay divが表示され、消えてしまいます。メインとサブメニューのmouseOver関数を何とか分ける必要があります。

それとも、NAV-オーバーレイdiv要素が既に存在しているかどうかをチェックする機能を変更できます。

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