Klassenname des untergeordneten Elements bei Mouseover abfragen jQuery

Question

Wenn Sie den Mauszeiger über die Menüelementliste halten, möchte ich das Submenü anzeigen und dann wieder ausblenden. Frage ist, wie target ich das spezifische subMenu (vorausgesetzt, ich habe mehr Menüpunkte mit Untermenüs) innerhalb der Menüeintrag geklickt.

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

Verwendung:

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

statt:

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

Answer 2

Versuche:

$('.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.

Es ist erwähnenswert, dass Sie brauchen, um diese nicht zu verwenden JavaScript überhaupt für (es sei denn, Sie sind mit Browsern wie IE6 zu unterstützen und weiter unten), und nur CSS verwenden:

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

JS Fiddle demo.

Referenzen:

• find().
• hide().
• hover().
• show().

Answer 3

Eine etwas andere Version von David Thomas' Lösung, die toggle() und nur eine innere Funktion verwendet:

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

Da Sie wollen einfach nur .subMenu ein- oder ausblenden, Sie nur eine innere Funktion benötigen, die wird bei Mouseover und Mouse-Leave aufgerufen. Es ist wahrscheinlich eine Frage der persönlichen Vorliebe, wenn Sie explizit die Maus-Leave-Funktion schreiben möchten, aber ich mag diese kürzere Version.