0

これが私を夢中にさせているので、事前にあなたの助けに感謝します。私がやろうとしているのは、ユーザーが<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');
});       
    })

助けてください！

マット

4

1 に答える 1

1

この代替案を試してください：http：//jsfiddle.net/wFy4t/2/

$("ul li.subMenu").click(function(){
$(this).find("ul").toggle();
});
于 2012-11-07T18:53:27.163 に答える