在悬停时使用功能setTimeout

Question

我在悬停时显示了两个不同的下拉菜单。它们使用延迟功能setTimeout进行显示，并使用延迟功能setTimeout进行淡出。

问题是，如果我将鼠标悬停在第一个li元素上，则第二个子菜单保持显示状态并且不淡出。从第二个锂元素到第一个锂元素是同样的问题。我知道这是一个问题，因为有setTimeout函数。将鼠标悬停在li元素上会激活功能clearTimeout。

我想在鼠标悬停时执行FadeIn子菜单，然后在将鼠标从第一个li元素移至第二个元素时，第一个子菜单隐藏（不使用fadeOut），同时显示第二个子菜单。当鼠标离开li元素并没有悬停在第二个元素上时，子菜单fadeOut会延迟。

我的问题是：当具有相同类的两个子菜单的此悬停功能都是动态的时，如何解决此问题？

感谢帮助！

    // Menu-hover-script
    var setTimeoutFadeIn, setTimeoutFadeOut

    function fadeIn_Menu(thisObj) {
      setTimeoutFadeIn = setTimeout(function() {
        thisObj.children('ul.level1').stop(false, false).fadeIn(220);
      }, 300);
    }

    function fadeOut_Menu(thisObj) {
      setTimeoutFadeOut = setTimeout(function() {
        thisObj.children('ul.level1').stop(false, false).fadeOut(180);
      }, 600);
    }

    $('li.submenu').hover(function() {

        clearTimeout(setTimeoutFadeOut);
        fadeIn_Menu($(this));

      },

      function() {

        clearTimeout(setTimeoutFadeIn);
        fadeOut_Menu($(this));

      });
    // END--Menu-hover-script

body li a {
  text-decoration: none;
}

li.nav-item {
  display: inline-block;
  list-style-type: none;
  width: 70px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  border: 1px solid black;
  cursor: pointer;
}

li.nav-item:first-child {
  margin-left: 100px;
}

ul.level1 {
  display: none;
  position: absolute;
  padding-left: 0;
}

ul.level1 li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="level1 nav-item submenu">
  <a class="nav-link" href="#">menu1</a>
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>
<li class="level1 nav-item submenu">
  <a class="nav-link" href="#">menu2</a>
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>

Answer 1

由于您在每次悬停时都调用clearTimeout，因此，一旦将鼠标悬停在另一个子菜单上，它将不再触发。可以将它们存储在不同的变量中，也可以只删除两个函数中的clearTimeout。

Answer 2

setTimeout()和fadeIn() / fadeOut()是多余的。只需为导致淡入/淡出的顶级菜单项设置mouseover和mouseout事件处理程序即可。

$("li.level1").on("mouseover", function(){
  $("ul.submenu", this).fadeIn(220);
});

$("li.level1").on("mouseout", function(){
  $("ul.submenu", this).fadeOut(180);
});

body li a {
  text-decoration: none;
}

li.nav-item {
  display: inline-block;
  list-style-type: none;
  width: 70px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  border: 1px solid black;
  cursor: pointer;
}

li.nav-item:first-child {
  margin-left: 100px;
}

ul.level1 {
  display: none;
  position: absolute;
  padding-left: 0;
}

ul.level1 li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="level1 nav-item submenu">
  menu1
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>
<li class="level1 nav-item submenu">
  menu2
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>

Answer 3

也可以完全不用任何jQuery来做到这一点。只是CSS

body li a {
  text-decoration: none;
}

li.nav-item {
  display: inline-block;
  list-style-type: none;
  width: 70px;
  height: 30px;
  line-height: 26px;
  text-align: center;
  border: 1px solid black;
  cursor: pointer;
}

li.nav-item:first-child {
  margin-left: 100px;
}

ul.level1 {
  opacity: 0;
  padding-left: 0;
  transition: opacity 180ms ease;
}

ul.level1 li {
  list-style-type: none;
}

.nav-item:hover > .submenu {
  display: block;
  opacity: 1;
  transition: opacity 220ms ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="level1 nav-item submenu">
  <a class="nav-link" href="#">menu1</a>
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>
<li class="level1 nav-item submenu">
  <a class="nav-link" href="#">menu2</a>
  <ul class="level1 submenu">
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
    <li class="level2"><a href="#">li element</a></li>
  </ul>
</li>