下拉菜单 JavaScript 延迟

Posted 2023-03-05

【中文标题】下拉菜单 JavaScript 延迟

【英文标题】：Dropline menu JavaScript delay

【发布时间】：2014-12-15 19:22:12

【问题描述】：

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

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

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

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

【问题讨论】：

您可以添加相关的 CSS 并创建一个StackSnippet

【参考方案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);
                );