单击菜单以外的任何位置时隐藏菜单

Question

点击图标后会出现一个菜单.目前我可以点击"关闭"图标关闭它,但我希望能够通过点击菜单外的任何地方关闭它,当菜单可见时.

这是一个jsFiddle:http://jsfiddle.net/budapesti/3v5ym2bp/3/

例如,以下不起作用:

$(document).click(function() { 
        if($('.menu').is(":visible")) {
            $('.menu').hide()
        }      
});

我发现了类似的问题,例如jQuery:在元素的其他任何地方点击隐藏元素,如何检测元素外的点击？,但无法让解决方案为我工作.

---

编辑:我想知道是否(":可见")与jQuery"animate"一起使用？

Answer 1

使用 css 属性left来检测菜单是否可见而不是:visibe因为它的机器人与 chrome 一起工作，请参阅jquery .is(\xe2\x80\x9c:visible\xe2\x80\x9d) 在 Chrome 中不起作用。

\n\n

您只需检测菜单是否可见（使用 css 属性 left），因为如果菜单 cssleft=0px是否意味着它可见，然后如果菜单click在菜单之外，则将其关闭。

\n\n

看看您的更新小提琴只需添加以下内容即可正常工作handle来检测外部点击：

\n\n

JS：

\n\n

$(document).click(function(e) {\n    //if the menu is visible\n    if($(".menu").css(\'left\') =="0px"){\n        //if the click is outside of menu\n        if($(e.target).closest(\'.menu\').length == 0){\n            $(\'.closed\').click();\n        } \n    }       \n});\n

\n