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"});
    });});

    });

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

我搞砸了，如果我将click事件更改为'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点击功能不在就绪功能中。在});

之后移除mouseout，尝试将其放在就绪函数like so内

在旁注上，如果您愿意，可以使用$代替jQuery

修改

我使用:not和on("click",...让它工作in my jsFiddle如果这个代码段不起作用，请尝试使用完整的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.

jQuery下拉菜单没有关闭

2 个答案: