下拉菜單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); 
       });