jQuery的菜單懸停問題

Question

我有一個相當簡單的菜單：

<ul id="menu"> 
<!-- TemplateBeginEditable name="mainmenu" --> 
    <li><a href="index.htm" title="" class="home">Home</a></li> 
    <li><a href="consumers.htm" title="" class="consumers">Consumers</a> 
     <ul id="consumer-menu"> 
      <li> --snip-- 

和：

$(document).ready(function() { 
     $('.consumers').hover(function() { 
      $("#consumer-menu").fadeIn(); 
     }, function() { 
      $("#consumer-menu").fadeOut(); 
     }); 
    }); 

的問題是，當你從<李類=「消費者」將鼠標移動路程。 ＃消費者菜單消失（因爲它應該），我試過使用$（'。消費者，＃消費者菜單也不起作用（你從＃消費者菜單鼠標移出。消費者和菜單淡出然後再次）。

我想我需要的是一種在一個jQuery選擇器語句中選擇消費者和所有它的孩子的方法，可能類似於$（'。consumers> *（但包括.consumers））。

感謝您的幫助！

John。

Answer 1

我能想到給定範圍內的簡單的答案是調整你的HTML這樣的：

<ul id="menu"> 
<!-- TemplateBeginEditable name="mainmenu" --> 
    <li><a href="index.htm" title="" class="home">Home</a></li> 
    <li class="consumers"><a href="consumers.htm" title="">Consumers</a> 
     <ul id="consumer-menu"> 
      <li>test</li> 
      <li>test</li> 
     </ul> 
    </li> 
</ul> 

應該制定出與jQuery的不變。

（與http://jsfiddle.net/MgbdN/測試）

Answer 2

你認爲解決方案在這裏：http://jsfiddle.net/WDktv/

基本上，當你將鼠標懸停在一個UL（或菜單節點，更普遍），那麼你應該淡入其子菜單UL（菜單節點）

<ul> 
<li><a href="#">One</a></li> 
<li><a href="#">Two</a></li> 
<li> 
    <a href="#">Three (+)</a> 
    <ul style="display:none;"> 
     <li><a href="#">Three and a half</a></li> 
     <li><a href="#">Three and three quarters</a></li> 
    </ul> 
</li> 
<li><a href="#">Four</a></li> 

$('li').hover(
    function(){$("ul", this).fadeIn()}, 
    function(){$("ul", this).fadeOut()})