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