Question

我在HTML中创建了一个单击元素时出现的“下拉菜单”。如果您点击该元素，它会将“选定”类应用于li，这将导致子菜单出现：

我现在有代码，点击菜单项时会显示/隐藏菜单。如果选择了不同的菜单，它将从中删除所选的类，并在单击的那个上切换它：

$("#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

HTML“下拉菜单” - 点击即可切换

1 个答案: