关于菜单隐藏的问题

Question

是这样子的，我做一个菜单，如下代码：

<nav>
<ul class="memu_ul">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <ul class="submenu">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
     </li>
</ul>
</nav>

li标签里面是a连接。我想点击第五个li的时候隐藏和显示子菜单，这个功能我能用toggle做到，但是当我想点击.submenu里面的li的时候，这个菜单一直都是显示的，却做不到。请问怎么才能做到这个功能。是用jquery的。多谢大家了。

Answer 1

$('.memu_ul').find('li:eq(4)').on('click',function(){
    $('.submenu').toggle();

})
$('.submenu').find('li').on('click',function(e){
    e.stopPropagation();
})

Answer 2

因为你没有 stopPropagation

所以子菜单被点击时，父菜单同样收到点击事件从而被关闭。

只要在子菜单的事件处理中加入 e.stopPropagation() 即可

Answer 3

你点击submenu还是点击触发了第五个li的toggle，因为submenu在第五个li里面。建议

$('memu_ul').on('click', 'li', function(){
    $(this).find('.ulbmenu').show();
})

就别用toggle了