下拉菜单 JavaScript 延迟

Question

我创建了一个下拉菜单。我正在使用一个使用 Foundation 5 框架的 WordPress 主题。二级菜单不是很容易使用我添加了一些 JavaScript 来增加二级菜单消失的延迟。该 JavaScript 旨在：

• 为二级菜单添加延迟，这样如果您将鼠标悬停在菜单外，二级菜单不会立即消失

这在某种程度上是有效的，但会导致一些问题

1. 有时当您暂停悬停在顶级菜单项上时，您将无法继续悬停并查看其他顶级菜单项的子菜单。
2. 我必须为顶级项目悬停使用相同的时间延迟值，以及设置用户在菜单外消失多长时间的值。这会导致一个问题，好像有足够的时间到达 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

希望这可能对其他人有所帮助。这是我用过的js

            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);
                });