【发布时间】：2012-12-17 22:13:45
【问题描述】：
我在 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) 单击文档上除菜单/子菜单本身以外的任何其他位置时，如何隐藏菜单？
【问题讨论】：
-
你自己不是已经回答#2了吗？
-
用户不必单击即可关闭 - 他们应该能够简单地将鼠标移出菜单。
-
虽然，@Diodeus，在自动关闭菜单之前使用短暂的超时可能会很好 - 如果您有多个子菜单，当您不小心将鼠标从边缘和整个东西上移开时真的很烦人立即关闭。
-
@Diodeus 不。在不悬停时让它保持不动是完全可以接受的。尤其是考虑到没有悬停概念的平板电脑。
-
@j08691 是的，我这样做了，但我的问题是这是推荐的模式还是我这样做的方式效率低下。