Question

感谢您的帮助，因为这让我发疯。我想要做的是在用户点击＆lt;＆lt; li class =“subMenu”＆gt;然后让它滑回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();
});

JQuery下拉菜单列表

1 个答案: