使用setTimeout函數將鼠標懸停在兩個下拉菜單上時出現問題

Question

我有兩個在懸停時顯示的下拉菜單。 它們使用延遲函數setTimeout來顯示，並且使用延遲函數setTimeout來淡出。

問題是，如果我將鼠標懸停在第一個li元素上，則第二個子菜單保持顯示狀態並且不淡出。 從第二個鋰元素到第一個鋰元素是同樣的問題。 我知道這是一個問題，因為有setTimeout函數。 將鼠標懸停在li元素上時會激活功能clearTimeout。

我想在鼠標懸停時執行FadeIn子菜單，然后將鼠標懸停在從第一個li元素到第二個li菜單上時，第一個子菜單隱藏（不使用fadeOut），同時顯示第二個子菜單。 當鼠標離開li元素而沒有懸停在第二個元素上時，子菜單帶有延遲淡出。

我的問題是：當具有相同類的兩個子菜單的此懸停功能都是動態的時，如何解決此問題？

感謝幫助！

  // 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>