Question

这是我用来显示和隐藏菜单的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);
            }
        }
    });
});

目前，要隐藏下拉列表，查看者必须单击菜单标题。我想添加功能，如果他们点击页面上的任何其他位置，则菜单将隐藏。

我已经阅读了通常的答案，但是在整合它们并正确删除“选定”类时遇到了问题。

我已将所有内容放在jsFiddle here中，但不幸的是代码在jsFiddle上不起作用（菜单不会下拉）。但是，当我上传它时，它确实可以在我的实时页面上运行。任何人回答为什么这可能会有所帮助，并可能更快地得到最终的解决方案。

Answer 1

这应该就是您所需要的：http://jsfiddle.net/PysAY/5/

除了让小提琴上班，我做了很少的改变。

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

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

然后我更改了菜单的click处理程序来调用该函数：

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

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

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

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

只要收到点击，它就会调用closeMenu函数。如上所述，我们对其他点击事件进行stopPropagation，以确保只有在没有其他事件发生时才会发生这种情况。（在小提琴中，您的整个主体都是菜单栏，因此您必须单击栏上某个不会导致下拉列表发生的位置。这将在您的测试平台上更好地工作。）

如何通过单击页面上的任何其他位置关闭下拉菜单并删除“已选择”类？

1 个答案: