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> 

자바 스크립트

$(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과 같은 브라우저를 지원해야하는 경우가 아니라면)이에 대한 모든 자바 스크립트를 사용할 필요가 없습니다, 그냥 CSS 사용할 수 있다는 지적 가치 :

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

을 JS Fiddle demo.

참고 :

• find().
• hide().
• hover().
• show(). toggle() 단 하나의 내부 함수를 사용 데이비드 토마스 '솔루션의

Answer 3

약간 다른 버전 :

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

그냥 표시하거나 .subMenu을 숨길 때문에, 당신은 하나 개의 내부 기능을 필요로하는 마우스 오버 및 마우스 놓기에서 호출됩니다. 명시 적으로 마우스 - 떠나기 기능을 쓰고 싶다면 아마도 개인적인 취향의 문제 일 겁니다.하지만이 짧은 버전을 좋아합니다.