下拉菜單懸停LI問題

此代碼用於下拉菜單，問題是，當我將鼠標懸停在li上時，下拉菜單打開狀態良好，然後當我將鼠標移到新的下拉div上時，li的懸停屬性被刪除，我需要li背景來使用懸停屬性，直到鼠標離開li a或下拉div。下拉菜單懸停LI問題

$("ul.nav li").hover(function(){ 
    $(this).find('.dropdown').toggle(); 
});

這是我正在使用的菜單代碼。

<ul class="nav"> 
    <li class="first"><a href="/">HOME</a></li> 
    <li> 
     <a href="#">CATEGORIES</a> 
     <div class="dropdown" style="display: none">test</div> 
    </li> 
</ul>

來源

2014-01-17 llanato

我不確定，但似乎你的.hover（）函數觸發兩次。一旦上了父母，一次上了孩子。所以你切換兩次，你最終在地面零，對吧？解決方案可能是查找CSS下拉菜單。 – jeff

這可以用好的CSS來完成。不需要jQuery。

.dropdown { display: none; } 
.nav li:hover .dropdown { display: block; }

jsFiddle

來源

2014-01-17 00:57:06 Sadiq

即使使用這個'li a'失去它的懸停背景屬性，當我將鼠標移動到下拉框顯示時。 – llanato

然後，您的代碼中可能會有一個腳本與導航行爲相混淆。它在我鏈接到的小提琴中工作正常。 – Sadiq

代替使用.hover功能，使用的mouseenter函數綁在「一」元件來觸發下拉。

然後使用綁定到較高li元素的mouseleave函數來隱藏下拉菜單。

來源

2014-01-17 01:15:01 smitty1

下拉菜單懸停LI問題

回答

相關問題