Question

概述： 我正在创建一个菜单，显示一个div＆＃39; showme＆＃39;当您将鼠标悬停在列表＆＃39; showhim＆＃39;列表项目上时。我想在列表项之间切换时有一个延迟，所以我包含了一个setTimeout函数。

问题：第一个mouseenter事件未触发setTimeout函数。如果我删除setTimeout函数，则mouseenter事件正常工作。的mouseenter

尝试： 我尝试过mouseover和mouseout，看看它是否有所作为。如果我将鼠标放在跨度（菜单项名称）上，则会触发setTimeout函数。

此外，当我在最顶层的父div上放置边框并在进入＆＃39; showhim＆＃39;之前将鼠标悬停在边框上时，会触发setTimeout函数并且菜单工作正常。我不知道为什么边界会使它发挥作用..

＆＃13;

// Fake these for the snippet
var isHomepage = false;
function isMobile() {
    return false;
}
// End of fake
$('.showhim').mouseenter(function() {
  if (!isMobile()) {
    var $this = $(this);
    timer = setTimeout(function() {

      $('.mastermenuitem').removeClass('menu-active');
      $('.mainmenuitem').removeClass('nav-active');
      $('.showme').css('display', 'none');

      // Expand Shop Menu Container
      if (isHomepage && !isMobile()) {
        var corecenter_width = $('#corecenter').innerWidth();
        $('#shop-menu-container').css('width', corecenter_width - (border_width * 2));
      }

      // Add active class to clicked menu item
      $this.find('li').addClass('menu-active');
      $this.find('.showme').css('display', 'block');
      $this.find('.mainmenuitem').addClass('nav-active');
    }, 150);
  }
}).mouseleave(function() {
  clearTimeout(timer);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <!-- setTimeout triggered when hovering over shop-menu-container border -->
<div id="shop-menu-container">
<div class="menu-wrapper">
<div class="showmemaster">
  <div class="showhim-wrapper"> 
    <!-- Trigger Element-->
    <div class="showhim"> 
      <!-- mouseover works the first time when hovering over the span -->
      <ul><li class="mainmenuitem"><span>Menu Item 1</span></li></ul>
      <div class="showme" style="display:none;"> 
        Content 1
      </div>
    </div>

 <div class="showhim"> 
      <ul><li class="mainmenuitem"><span>Menu Item 2</span></li></ul>
      <div class="showme" style="display:none;"> 
        Content 2
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

<强>解决：我有两个引用相同计时器变量的setTimeout函数。

我所做的就是创建另一个计时器并且悬停正常工作。

var timer; // setTimeout for Menu Close 
var timer2; // setTimeout for Showhim 

// TIMER 2
$('.showhim').mouseenter(function() {

  // Do something

    }, showhim_timeout);
}).mouseleave(function() {
    clearTimeout(timer2);
});


// TIMER 1
function timeoutMenu() {
    timer = setTimeout(function() {
        close();
    }, menu_timeout);

}

function stopTimeout() {
    clearTimeout(timer);
}

setTimeout函数在第一个mouseenter / hover时不会触发

1 个答案: