下拉菜单JavaScript延迟

Question

我已经创建了一个dropline菜单。我正在使用一个使用Foundation 5框架的WordPress主题。第二级菜单不是很容易使用我添加了一些JavaScript来添加延迟到第二级菜单消失。这个JavaScript意味着：

• 延迟添加到二级菜单，这样，如果你将鼠标悬停在菜单外二级菜单不瞬间消失

这在某种程度上工作，但导致一些问题

1. 有时，当您暂停悬停在顶级菜单项上时，您无法保持悬停并查看其他顶级项目的子菜单。
2. 我不得不使用相同的时间延迟值进行顶级项目悬停，并且该值设置用户在菜单消失之前已经在菜单之外多久。这是一个问题，因为有足够的时间来达到二级菜单项，然后悬停在顶级菜单变得非常笨重

任何提示将非常感激！我还没有包括所有的HTML的菜单作为其相当长

  <ul id="menu-main-navigation" class="desktop-menu"><li id="menu-item-488" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-488"><a href="http://new.st-laurence.com/">Home</a></li> 
       <li id="menu-item-489" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-489"><a href="http://new.st-laurence.com/about-us/">About Us</a> 
        <ul class="sub-menu" style="display: block; left: 0px;"> 
         <li id="menu-item-490" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-490"><a href="http://new.st-laurence.com/about-us/latest-news/">Latest News</a></li> 
         <li id="menu-item-491" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-491"><a href="http://new.st-laurence.com/about-us/our-history/">Our History</a></li> 
         <li id="menu-item-492" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-492"><a href="http://new.st-laurence.com/about-us/photo-gallery/">Photo Gallery</a></li> 
         <li id="menu-item-493" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-493"><a href="http://new.st-laurence.com/about-us/exam-results/">Exam Results</a></li> 
         <li id="menu-item-494" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-494"><a href="http://new.st-laurence.com/about-us/senior-team/">Senior Team</a></li> 
         <li id="menu-item-495" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-495"><a href="http://new.st-laurence.com/about-us/governors/">Governors</a></li> 
         <li id="menu-item-496" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-496"><a href="http://new.st-laurence.com/about-us/slsa-parents-association/">SLSA Parents’ Association</a></li> 
         <li id="menu-item-497" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-497"><a href="http://new.st-laurence.com/about-us/ofsted/">Ofsted</a></li> 
         <li id="menu-item-526" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-526"><a href="http://new.st-laurence.com/about-us/academy/">Academy</a></li> 
        </ul> 
       </li> 
       <li id="menu-item-499" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-327 current_page_item menu-item-has-children menu-item-499 active-menu-item active"><a href="http://new.st-laurence.com/join-us/">Join Us</a> 
        <ul class="sub-menu"> 
         <li id="menu-item-500" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-500"><a href="http://new.st-laurence.com/join-us/admissions/">Admissions</a></li> 
         <li id="menu-item-501" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-501"><a href="http://new.st-laurence.com/join-us/primary-transition/">Primary Transition</a></li> 
         <li id="menu-item-601" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-601"><a href="http://new.st-laurence.com/vacancies/">Staff Vacancies</a></li> 
        </ul> 
       </li> 
       <li id="menu-item-502" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-502"><a href="http://new.st-laurence.com/curriculum/">Curriculum</a> 
        <ul class="sub-menu" style="display: block; left: 0px;"> 
         <li id="menu-item-503" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-503"><a href="http://new.st-laurence.com/curriculum/subjects/">Subjects</a></li> 
        </ul> 
       </li> 
       <li id="menu-item-509" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-509"><a href="http://new.st-laurence.com/school-life/">School Life</a> 
        <ul class="sub-menu" style="display: block; left: 0px;"> 
         <li id="menu-item-510" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-510"><a href="http://new.st-laurence.com/school-life/houses/">Houses</a></li> 
         <li id="menu-item-511" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-511"><a href="http://new.st-laurence.com/school-life/students-wellbeing/">Student Wellbeing</a></li> 
         <li id="menu-item-513" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-513"><a href="http://new.st-laurence.com/school-life/school-council/">School Council</a></li> 
         <li id="menu-item-512" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-512"><a href="http://new.st-laurence.com/school-life/school-clubs/">School Clubs</a></li> 
         <li id="menu-item-514" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-514"><a href="http://new.st-laurence.com/school-life/performing-arts/">Performing Arts</a></li> 
         <li id="menu-item-516" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-516"><a href="http://new.st-laurence.com/school-life/sports-leadership/">Sports Leadership</a></li> 
         <li id="menu-item-517" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-517"><a href="http://new.st-laurence.com/school-life/spiritual-life/">Spiritual Life</a></li> 
        </ul> 
       </li> 
      </ul> 

这里是我的JavaScript

$(document).ready(function(){ 
     var $submenu; 
     var $delay = 3000; 
     var myVar; 
    $("#menu-main-navigation li:not(.active)").mouseover(function() { 
     clearTimeout(myVar); 
     $submenu = $(this).find('.sub-menu'); 
     $submenu.css({ 
      display: 'block', 
      left:'0' 
     }); 
    }).mouseout(function() { 
     if($("#menu-main-navigation li:hover").length){ 
      clearTimeout(myVar); 
      return false; 
     }else{ 
       var $submenu = $(this).find('.sub-menu'); 
       $submenu.hover(
        function(){ 
         $(this).toggleClass('is-hover'); 
        } 
      ); 
       setTimeout(function(){ 
        if(!$submenu.hasClass('is-hover')){ 
        myVar = setTimeout(function(){ 
          $submenu.css({ 
           display: 'none', 
           left:'-999' 
          }); 
         },500); 
        } 
       },1000); 
     } 

    }); 
    $('.sub-menu li').mouseover(function(){ 
      $(this).closest('ul').addClass('is-hover'); 
      clearTimeout(myVar); 
      $(this).closest('ul').css({ 
       display: 'block', 
       left:'0' 
      }); 
     }).mouseout(function(){ 
      $(this).closest('ul').removeClass('is-hover'); 
      myVar = setTimeout(function(){ 
       $(this).closest('ul').css({ 
        display: 'none', 
        left:'-999' 
       }); 
      },$delay); 
     }); 
    }); 

Answer 1

希望这可以帮助别人。下面是我用

  var myTimer; 
      //Replace li hover state with javascript 
       $('.desktop-menu>li').hover(function() { 
        clearTimeout(myTimer); 
        if ($(this).hasClass('activetab')) { 
         // do nothing because the link is already active 
        } else {  
         // remove .activetab from all tabs 
         $('.activetab').removeClass('activetab'); 
         // add .activetab to this tab 
         $(this).addClass('activetab'); 
        } 
       }); 
      //Replace ul hover state with javascript 
       $('ul#menu-main-navigation').hover(function() { 
        if ($(this).hasClass('activemenu')) { 
         // do nothing because the link is already active 
        } else {  
         // add .activemenu to this menu 
         $(this).addClass('activemenu'); 
        } 
       }); 
      //Remove the submenu after 2 seconds of leaving the top menu 

       $('.top-bar-section').mouseleave(function() { 
        myTimer = window.setTimeout(function() {$('.desktop-menu>li.activetab').removeClass('activetab'); 
        $('ul#menu-main-navigation').removeClass('activemenu');},2000); 
       });