使鼠標懸停時出現下拉菜單

我最近做了這個簡單的導航，你有幾個鏈接有一個下拉菜單。首先它只是在CSS3中，但後來我決定添加一些jQuery來讓下拉菜單在一段時間後出現。（大多數jQuery代碼是基於在另一個線程給出的答案）使鼠標懸停時出現下拉菜單

基本上，我的問題是，我不能瞄準正確的元素盤旋，因此當我懸停李元素，所有我的下拉菜單顯示出來。我儘可能地調整了它，但我無法找到正確的代碼片段。

任何回覆非常感謝！

我的菜單如下：

<ul id="generale"> 
       <li><a href="#">Item 1</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li> 
        <a href="#">Item 3</a> 
        <ul> 
         <li><a href="#">Subitem 1</a></li> 
         <li><a href="#">Subitem 2</a></li> 
         <li><a href="#">Subitem 3</a></li> 
         <li><a href="#">Subitem 4</a></li> 
         <li><a href="#">Subitem 5</a></li> 
        </ul>  
       </li> 
       <li> 
        <a href="#">Item 4</a> 
        <ul> 
         <li><a href="#">Subitem 1</a></li> 
         <li><a href="#">Subitem 2</a></li> 
         <li><a href="#">Subitem 3</a></li> 
         <li><a href="#">Subitem 4</a></li> 
         <li><a href="#">Subitem 5</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Item 5</a></li> 
       <li><a href="#">Item 6</a></li> 
      </ul>

和我的jQuery：

var navTimers = []; 
      $("#generale > li").hover(
       function() { 
        var id = jQuery.data(this); 
        var $this = $(this); 

        navTimers[id] = setTimeout(function() { 
         $('#generale ul').fadeIn(200); 
         navTimers[id] = ""; 
        }, 300); 
       }, 
       function() { 
        var id = jQuery.data(this); 
        if (navTimers[id] != "") { 
         clearTimeout(navTimers[id]); 
        } else { 
         $('#generale ul').fadeOut(200); 
        } 
       } 
      );

來源

2012-06-26 user990460

你爲什麼不只是添加一個類你需要放棄，並且瞄準那個班級。其實看完你的代碼後，你的菜單顯示和隱藏的目標是ul ul li – Huangism

你的淡入淡出和功能是目前#generale元素中指定的所有ul秒。

嘗試改變

$('#generale ul').fadeIn(200);

到

$this.find('ul').fadeIn(200);

和

$('#generale ul').fadeOut(200);

到

$this.find('ul').fadeOut(200); // you'll also have to define $this = $(this)

來源

2012-06-26 17:44:17 jackwanders

非常感謝！ – user990460

使鼠標懸停時出現下拉菜單

回答

相關問題