jquery - HTML "Dropdown Menu"- 点击切换

Question

我在 HTML 中创建了一个“下拉菜单”，当您单击某个元素时就会出现该菜单。如果您单击该元素，它会将“selected”类应用于li，这将导致子菜单出现:

jsFiddle Example

我现在有代码，可以在单击菜单项时显示/隐藏菜单。如果选择了不同的菜单，它将从中删除所选的类并将其切换到单击的类上:

$("#menu").on("click", "li.dropdown", function(event) {
    event.preventDefault();
    event.stopPropagation();

    $(this).siblings(".dropdown").removeClass("selected");
    $(this).toggleClass("selected");
});

问题是，当我单击子菜单中的子项时，我现在的方式会切换菜单并关闭它。

我还想在单击文档中的其他任何位置时隐藏菜单。这可以通过以下方式完成:

$(document).on("click", function(event) {
    $("#menu .dropdown").removeClass("selected");
});

1) 如何在单击下拉部分时启用此切换功能而不隐藏菜单？

2)当单击文档上除菜单/子菜单本身之外的任何其他位置时，如何隐藏菜单？

Answer 1

您似乎以可接受的方式回答了#2。要做#1:

$('.submenu').click(function(e) {
    e.stopPropagation();
});​

<强> jsFiddle example