jQuery下拉菜单没有关闭

时间:2014-01-24 14:07:02

标签: jquery

我做了一个下拉菜单,你点击的第一个项目菜单显示子菜单,其中任何子菜单显示/隐藏在悬停/悬停关闭。我遇到的唯一问题是我希望主要导航在点击文档的任何位置时关闭。

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,子菜单甚至根本没有出现。

2 个答案:

答案 0 :(得分: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

修改

我使用:noton("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"
    });
});

答案 1 :(得分:1)

你可以试试这个:

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