하위 메뉴 스크립트에서 추가 기능 만들기

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

문제는 megaOver 기능이 하위 메뉴 항목뿐만 아니라 주 메뉴 항목에 대해 실행 중임을 나타냅니다. 그 결과로 #nav-overlay div가 나타나고 사라집니다. main과 submenu의 mouseOver 함수를 분리해야합니다.

또는 당신이 항법 오버레이 사업부가 이미 있는지 확인하는 기능을 수정할 수 :

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