mouseover jquery上の子要素のクラス名を取得

Question

menuItemリストの上にマウスカーソルを移動すると、サブメニューが表示されてから再びmouseout hideになります。質問は、クリックしたmenuItem内で、特定のサブメニューをどのようにターゲットにするのですか（サブメニュー付きのメニュー項目が多いと仮定します）。

HTML

<ul> 
<li class="menuItem"> 
Menu Item 1 
<ul class="subMenu"> 
<li> <a href="#"> Link 1 </a> </li> 
<li> <a href="#"> Link 2 </a> </li> 
</ul> 
</li> 

javascriptの

$(document).ready(function() { 
$('.menuItem').mouseover(function() { 


$($this).class('.subMenu').show(); 

}); 
}); 

Answer 1

用途：

$(this).find('.subMenu').show(); 

の代わり：

$($this).class('.subMenu').show(); 

Answer 2

試行：

$('.menuItem').hover(
    function(){ 
     // first function is for the mouseover/mouseenter events 
     $(this).find('.subMenu').show(); 
    }, 
    function(){ 
     // second function is for mouseleave/mouseout events 
     $(this).find('.subMenu').hide(); 
    }); 

JS Fiddle demo

それはあなたが（あなたは、以下IE6やなどのブラウザをサポートするために持っていない限り）、このために、すべてのJavaScriptを使用する必要はありません、とだけCSSを使用することができることを指摘する価値がある：

.menuItem:hover .subMenu, 
.subMenu:hover { 
    display: list-item; 
} 
.subMenu { 
    display: none; 
}​ 

JS Fiddle demo。

参考文献：

• find()。
• hide()。
• hover()。
• show()。

Answer 3

デビッド・トーマスtoggle()を使用するソリューション、そして唯一の内側の関数のA、わずかに異なるバージョン：

$('.menuItem').hover(function(){ 
    $(this).find('.subMenu').toggle(); 
}); 

あなただけ.subMenuを表示または非表示にしたいので、あなただけの1の内側の機能を必要とし、そのマウスオーバーとマウス離しで呼び出されます。明示的にマウス・リーブ機能を書いておきたいのであれば、おそらく個人的な好みの問題ですが、私はこの短いバージョンが好きです。