jquery - JQuery Drop Down Menu list

Question

Thanks for your help in advance as this is driving me crazy. What I'm trying to do is have a sub list slide down once user has clicked on a < li class="subMenu" > and then have it slide back up onClick (it's going on a mobile site). I can't figure out why this isn't working.

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

Please help!

Mat

Answer 1

试试这个替代方案：http: //jsfiddle.net/wFy4t/2/

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