javascript - $(document).on ("click"... 如何在单击文档上的其他任何位置时折叠列表

Question

我正在尝试为我的网站构建一个可折叠/可展开的菜单。我有一个版本，将鼠标悬停在一个类别上会导致子类别展开，但我真正想要的是单击一个类别并让子类别展开并保持展开状态，直到我单击页面上的其他任何地方。我想我已经很接近了——我看过很多例子，只是在努力将它们拼凑在一起。

目前的情况是，当我点击列表本身时，我可以让列表展开和折叠，但是当我点击文档的其他地方时，我无法让任何事情发生。我意识到我还必须对 stopPropagation() 做一些事情，但首先要做的是......

Javascript:

function show_sub(cat){
  cat.querySelector("ul").style.display = (cat.querySelector("ul").style.display == "block") ? "none" : "block";
};

$('body').on("click", function () {
    $("#nav ul").style.display="none";
});

CSS:

#nav {
    width: 120px;
    border: black 1px solid;
}
#nav li > ul {
    display:none;
}

HTML:

<ul id="nav">
    <li id="cat1" onclick="show_sub(this)">Vegetables
        <ul>
            <li>Beans</li>
            <li>Carrots</li>
            <li>Greens</li>
            <li>Onions</li>
        </ul>
    </li>
        <li id="cat2" onclick="show_sub(this)">Fruit
            <ul>
                <li>Apple</li>
                <li>Banana</li>
                <li>Cantaloupe</li>
            </ul>
        </li>
</ul>

link to jfiddle

提前感谢您的耐心等待。我对 Javascript 没有太多经验，但我发现 Stack Overflow 对我了解如何更改现有网站非常有帮助。然而，当涉及到从头开始创建任何东西时，我仍然犹豫不决。

编辑:使用来自@JustinMorgan 的解决方案并添加一行以便一次只能看到一个子菜单:http://jsfiddle.net/nbavc5g7/2/

Answer 1

你是对的，你确实需要 stopPropagation。展开子列表的同一点击事件向上传播到链中，body 上的点击处理程序立即再次隐藏它。

您还可以在几个地方简化您的代码。试试这个:

$('#nav > li').on('click', function(e) {
    e.stopPropagation();
    $('ul', this).show(); 
});

$('body').on("click", function () {
    $("#nav ul").hide();
});  

演示:http://jsfiddle.net/d60Lcq9j/1/

编辑:这是一个稍微复杂一些的版本，您可以通过再次单击其标题来关闭子菜单。此版本不会停止事件传播:

$('#nav li').on('click', function(e) {
    if (e.target === this) {
        $(this).children('ul').toggle(); 
    }
});

$('body').on("click", function (e) {
    var item = $(e.target).closest('#nav > li');
    $('#nav > li')
        .not(item)
        .find('ul')
        .hide();
});

演示:http://jsfiddle.net/Luk35kb6/