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(); 
});