javascript - JS下拉菜单不关闭？

Question

所以我在这里找到了这个小提琴：http: //jsfiddle.net/8qPvp/4/ 我想我只是将它用于个人教育目的。我对 JS 很陌生，我注意到打开的父级不会像打开一样返回点击。这怎么可能解决？

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    });
});

Answer 1

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    }).mouseleave(function(){
        $(this).children("ul").hide();
    });
});

检查这个小提琴http://jsfiddle.net/Aveendra/8qPvp/18/

Answer 2

那这个呢：

$("li").click(function () {
    $('li > ul').hide();
    $(this).children("ul").toggle();
});

$(document).click(function()
{
    $('li > ul:visible').hide();
})

$('.menu li').click(function(e)
{
    e.stopPropagation();          
})

因此，默认情况下，只要单击文档中的任何位置，我都会隐藏您的可见菜单。但是，当您打开一个新菜单时，您不希望这种情况发生（将；使其可见并直接隐藏）。因此，当您要打开新菜单时，我会捕获一个异常，然后我将取消文档单击事件。
我使用event.stopPropagation()来取消一个事件。

jsFiddle