Jquery/CSS 하위 메뉴

Question

내 메뉴에 행 사이에 숨겨진 메뉴를 표시하려고합니다. 나는 순수한 CSS 메뉴를 원하지 않는다. 제 마크 업이 줄어들고 많은 일들이 빠져 나간다는 것을 알고 있습니다. 이것은 단지 잘라내어 붙여 넣기 만하면됩니다. (작은 windoes은 행당 1, 2 개 또는 3 링크 자신의 할 수있는 경우),이 메뉴가 완전히 유체 할 필요가 있기 때문에이 방법을 설정 한

<nav> 
<div class="navigation_toplevel"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 

<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
<div class="navigation_toplevel has_sub"> 
    <a href="Index"><h4>Home</h4></a> 
</div> 
<div class="navigation_bottomlevel"> 
    <ul> 
     <li>Preferences</li> 
     <li>Preferences</li> 
     <li>Preferences</li> 
    </ul> 
</div> 
</nav> 

: 여기

는 HTML입니다 하위 메뉴를 아래쪽으로 가로로 표시하고 nav 컨테이너를 채 웁니다.

내 JQuery와 :

<script> 
$(document).ready(function() { 


    if ($(".navigation_toplevel").hasClass("has_sub")) { 
     $(this).hover(function() { 
      $(".navigation_toplevel").nextAll("div:first").toggleClass("show_sub"); 
     }); 
      } 

      else { } 
     }); 

</script> 

은 내가 잘못 여기서 뭐하는 거지?

Answer 1

잘, $(".navigation_toplevel")은 컬렉션을 반환합니다. 클래스 이름으로 요소를 가져올 때 컬렉션을 사용하여 작업하는 올바른 방법은 $(".navigation_toplevel").each(function(){ do something with a single element })입니다. 그러나 귀하의 경우에는 다음과 같은 코드가 필요하다고 생각합니다 : $(".navigation_toplevel.has_sub").hover(mouseInHandler, mouseOutHandler)