jQuery 및 html5로 하위 메뉴 만들기

jQuery 및 javascript로 하위 메뉴를 만들고 싶습니다. 나는이 HTML 구조가 있습니다jQuery 및 html5로 하위 메뉴 만들기

<nav class="container"> 
    <ul> 
     <li><a href="#" title="Werken in de zorg">Werken in de zorg</a> 
      <ul class="submenu"> 
       <li><a class="label" href="#" title="Lees meer over Werkvelden">Werkvelden</a></li> 
       <li><a href="#" title="Lees meer over Eerstelijnzorg">Eerstelijnzorg</a></li> 
       <li><a href="#" title="Lees meer over Geestelijke Gezondheidszorg">Geestelijke Gezondheidszorg</a></li> 
       <li><a href="#" title="Lees meer over Gehandicaptenzorg">Gehandicaptenzorg</a></li> 
      </ul> 
     </li> 
     <li><a href="#" title="Vacatures">Vacatures</a></li> 
     <li><a href="#" title="Opleidingen en scholen">Opleidingen en scholen</a></li> 
    </ul> 
</nav>

는 CSS에서를 전혀 표시하지하는 .submenu 설정됩니다. 하지만 지금 자바 스크립트. 나는 원한다. 호버리 아이템이 있다면. 그런 다음 하위 메뉴가 나타납니다. 그리고 당신이 하위 메뉴로 갈 때. 그럼 여전히 300ms 남아 있습니다. 하지만 jQuery는 어떻게해야합니까?

도움 주셔서 감사합니다.

$(document).ready(function() { 
    $('nav.container').children('ul').children('li').hover(function() { 
     if ($(this).find('.submenu').length > 0) { 
      $(this).find('.submenu').slideToggle(); 
     } 
    }, function() { 
     $(this).find('.submenu').delay(300).slideToggle(); 
    }); 
});

Here's a fiddle가 작동을 보여 :

출처

2011-12-21 Mike Vierwind

hoverintent 사용할 수 있습니다. 그들 중 하나를 체크 아웃 베스트 –

당신은 무엇을 가지고 있니? 좋은 무엇입니까? –