jquery幫助使用.each（）分配多個鼠標事件來隱藏/顯示圖標並顯示背景顏色

Question

需要一些幫助來指定一個mouseover事件來顯示一些隱藏起始的圖標。

對於ul中的每個<li>，我都有圖標。當用戶將鼠標移動到<li>上時，我希望顯示帶有名爲「圖標」的類的span標籤。當發生鼠標移出事件時，請移除該類並/或只隱藏該跨度。對我來說，問題是如何分配事件，以便當鼠標懸停在<li>上時，span標記及其內容就會出現並消失。

繼承人的HTML：

<ul id="nav"> 
    <li>Cat 1 
      <span class="icons"> 
       <div>stuff here</div> 
      </span> 
    </li> 
    <li>Cat 2 
      <span class="icons"> 
       <div>stuff here</div> 
      </span> 
      <ul> 
       <li>Sub Cat 2A 
        <span class="icons"> 
         <div>2A stuff here</div> 
        </span> 
       </li> 
      </ul> 
    </li> 
</ul> 

繼承人我的jQuery代碼。

$('#nav li').each(function(){ 

       //Add Background Shading o Mouseover to all Rows in the menu 
       $(this).mouseover(function(){ 
         $(this).addClass("background_grey").removeClass("icons"); 
       }) 

       $(this).mouseout(function(){ 
         $(this).removeClass("background_grey").addClass("icons"); 
       }); 
     }); 

感謝您的幫助。

Answer 1

您不需要爲此使用each()函數。 mouseout()和mouseover()函數將應用於您的選擇器返回的所有元素。

$('#nav li').mouseover(function(){ 
    ... 
}).mouseout(function(){ 
    ... 
}); 

現在訪問跨度這是盤旋的元素裏面，你可以使用find()功能。

$(this).find("span").removeClass("icons"); 

    $(this).find("span").addClass("icons"); 

最後，您應該優先於mouseover/mouseout使用mouseenter/mouseleave因爲你不想讓你的隱藏事件，當你進入span元素火。

$('#nav li').mouseenter(function(){ 
    $(this).addClass("background_grey") 
    .find("span").removeClass("icons"); 
}).mouseleave(function(){ 
    $(this).removeClass("background_grey") 
    .find("span").addClass("icons"); 
}); 

Answer 2

可以縮短了這一切使用.hover()，.toggleClass()和.toggle()這樣的：

$('#nav li').hover(function(){ 
    $(this).toggleClass("background_grey").find(".icons").toggle(); 
}); 

這將觸發後臺類.icons跨度是否顯示懸停，鼠標移開時相反。