jQuery下拉菜单未关闭

Question

我制作了一个下拉菜单，您单击第一个项目菜单以显示子菜单，以及该菜单中的任何子菜单在悬停/悬停时显示/隐藏。我遇到的唯一问题是我希望在单击文档的任意位置时关闭主导航。

jQuery(document).ready(function () {
        jQuery(".mainNav ul li").click(function () {
            jQuery(this).find("> ul").css({ "opacity": "1", "visibility": "visible", "top": "30px" });
            });
        jQuery(".sub-menu li").mouseover(function () {
            jQuery(this).find("> ul").css({ "opacity": "1", "visibility": "visible", "top": "30px" });
        });
        jQuery('.sub-menu li').mouseout(function () {
            jQuery(this).find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"});
        });});

//the code i tried below
jQuery('document').click(function () {
        jQuery(.mainNav ul li ).find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"});
    });});

    }); 

我假设这两个点击事件是冲突的，但我不太清楚如何处理它。

例如，如果我将点击事件更改为位于其正下方的“h1”元素，则我搞砸了并且下拉菜单关闭。然后我将其更改为 .container 并且子菜单根本没有出现。

Answer 1

你可以使用jQuery的.not或:not

jQuery(document).not(".mainNav ul").click(function () {
    jQuery(".mainNav ul li").find("> ul").css({ "opacity": "0", "visibility": "hidden", "top": "35px"});
});});

您在我添加的选择器中缺少一些括号

您还有一组额外的});，并且您的document click 函数不在 ready 函数内。试着把它放在 ready 函数中，like so 通过删除 }); 之后的 mouseout

另外，如果您愿意，可以使用 $ 代替 jQuery

编辑

我使用 :not 和 on("click",... 让它工作 in my jsFiddle 如果只是这个 sn-p 不起作用，请尝试完整的 jQuery

jQuery(document).on("click", ":not(.mainNav ul, .mainNav ul *)", function () {
    jQuery(".mainNav ul li").find("> ul").css({
        "opacity": "0",
            "visibility": "hidden",
            "top": "35px"
    });
});

Answer 2

你可以试试这个：

jQuery(document).not('.mainNav ul').click(function () {
//-----^------^-------you have to remove quotes here.