JQuery 드롭 다운 메뉴 목록

Question

이것이 나를 미치게 만들 때 미리 도움을 주셔서 감사합니다. 내가 뭘 하려는지 사용자가 < li class = "subMenu">를 클릭하면 하위 목록 슬라이드가 생기고 슬라이드 위로 onClick (모바일 사이트로 이동)을 갖게됩니다. 왜 이것이 작동하지 않는지 나는 알 수 없다.

HTML :

<ul class="dropdown"> 
<li class="subMenu"> 
    Menu item 
    <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>   
</li> 
<li class="subMenu"> 
    Menu item 2   
    <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul> 
</li> 
<li class="subMenu"> 
    Menu item 3 
    <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul> 
</li> 
<li class="subMenu"> 
    Menu item 4   
    <ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>   
</li>  

CSS :

ul li {list-style-type: none;} 
    ul {overflow:hidden;} 
    ul li {cursor:pointer;float:left;padding: 3px;margin:0 5px;width:80px;background:#ccc;} 
    ul ul {display:none} 
    ul ul li {clear:both;} 

JS :

$(function(){ 
$(document).mousedown(function(){ 
    $('.dropdown .active').removeClass('active').children('ul').hide(); 
}) 
$('.dropdown').on('mousedown','.subMenu', function(e){ 
    e.stopPropagation(); 
    var elem = $(this); 
    if(elem.is('.active')) { 
     elem.children('ul').slideUp(150); 
     elem.removeClass('active'); 
    } else { 
     $('.dropdown .active').removeClass('active').children('ul').hide(); 
     elem.addClass('active').children('ul').slideDown(150); 
    } 
}); 
$('.subMenu').on('mousedown','ul', function(e){ 
    e.stopPropagation(); 
    alert('menu item clicked'); 
});  
    }) 

도와주세요!

매트

Answer 1

이 다른 시도 : 여기 잘 작동 http://jsfiddle.net/wFy4t/2/

$("ul li.subMenu").click(function(){ 
$(this).find("ul").toggle(); 
});