Jquery 如何通过单击页面上的任何其他位置关闭下拉菜单并删除该类；选定的“；？

下面是我用来显示和隐藏菜单的jquery代码

jQuery(window).load(function () {
    $("#nav > li > a").click(function () { // binding onclick
        if ($(this).parent().hasClass('selected')) {
            $("#nav .selected div div").hide(); // hiding popups
            $("#nav .selected").removeClass("selected");
        } else {
            $("#nav .selected div div").hide(); // hiding popups
            $("#nav .selected").removeClass("selected");
            if ($(this).next(".subs").length) {
                $(this).parent().addClass("selected"); // display popup
                $(this).next(".subs").find("*").slideDown(200);
            }
        }
    });
});

当前，要隐藏下拉列表，查看器必须单击菜单标题上的“上一步”。我想添加一个功能，如果他们点击页面上的其他任何地方，菜单就会隐藏

我已经阅读了常见的答案，但在整合它们和正确删除“选定”类时遇到了困难

---

我已经将所有内容都放在了JSFIDLE中，但不幸的是，代码在JSFIDLE上不起作用（菜单不会下拉）。然而，当我上传它们时，它确实可以在我的实时页面上工作。任何人回答这一问题的原因都会很有帮助，可能会更快地找到最终解决方案。

这应该是您所需要的：

除了让小提琴开始工作，我几乎没有做什么改变

首先，我创建了一个新函数，封装了单击所选菜单时正在执行的操作。由于您希望在单击菜单时出现相同的功能，因此它应该是自己的功能

var closeMenu = function() {
    $("#nav .selected div div").hide(); // hiding popups
    $("#nav .selected").removeClass("selected");
};

然后我更改了菜单的

单击
处理程序以调用该函数：

$("#nav > li > a").click(function (e) { // binding onclick
    if ($(this).parent().hasClass('selected')) {
        closeMenu();
    } else {
        // ...
        e.stopPropagation()

我在单击处理程序的顶部和底部添加了行，以停止事件传播。这样，下面的body click事件将不会收到打开菜单并立即关闭菜单的单击

最后，我在主体中添加了一个单击处理程序：

$("body").click(function () {
    closeMenu();
});

它只需在收到单击时调用closeMenu函数。如上所述，我们对其他单击事件执行stopPropagation，以确保只有在没有其他操作时才会发生这种情况。（在小提琴中，你的整个身体都是菜单栏，因此你必须单击菜单栏上不会导致下拉的某个位置。这将在你的测试平台上更好地工作。）
修复了小提琴-。（我在左窗格中将其设置为使用jquery，并删除了onjQuery加载包装器。）太棒了。这正是我想要的。我的大脑太兴奋了，我没有考虑让它发挥自己的功能。