单击菜单外部时，使用jquery关闭菜单

I would like to add an event with j-query where the user clicks outside the menu it animates slides the menu and closes the overlay opacity. Instead of using event.stopPropagation(); I would like to this: Jquery

我想添加一个带有j-query的事件，用户在菜单外点击它会动画菜单并关闭叠加层不透明度。而不是使用event.stopPropagation（）;我想这个：Jquery

$(this).click(function (event) {
        if (!$(event.target).closest('').length) {
            $("").hide();
        }
    });

I want to use this code in my jquery somehow. Here is my code: https://jsfiddle.net/2a4y4uds/2/

我想以某种方式在我的jquery中使用这段代码。这是我的代码：https：//jsfiddle.net/2a4y4uds/2/

A little new to j-query so bear with me

j-query有点新，所以请耐心等待

2 个解决方案

#1

You could use variables.

你可以使用变量。

EDIT3 think i have fixed the bugs now.

EDIT3认为我现在修复了错误。

JavaScript/jQuery:

的JavaScript / jQuery的：

DEMO

DEMO

var menuopen = false;
var menuclicked = false;


    function animatemenu(){
        if (!$(".c-menu--slide-left").hasClass("Moved")) {
            $(".c-menu--slide-left").animate({
                "left": "0px"
            }, "slow").addClass("Moved");
            $(".menu-overlay").fadeToggle("slow");
            setTimeout(function(){ menuopen = true;}, 100);
           // alert("open");
        } else {
            $(".c-menu--slide-left").animate({
                "left": "-300px"
            }, "slow").removeClass("Moved");
            $(".menu-overlay").fadeToggle("slow");
           setTimeout(function(){ menuopen = false, menuclicked = false;}, 100);
            //alert("close");
        }
    }


$(document).ready(function () {
  $(".menu").click(function () {
    animatemenu();
    menuopen = false;
  });

  $("#c-menu--slide-left").click(function () {
    //alert("menu");
    menuclicked = true;
    setTimeout(function(){ menuclicked = false;}, 1);
  });
});



$(document).click(function() {
        if (menuclicked == false){
            if (menuopen == true) {
                animatemenu();
            }
        }
});

#2

I use this code:

我用这个代码：

// click anywhere hide the menus if it is visible
$('html').click(function(event) {
    if ( $('#menu').is(':visible') ) {
        var re = new RegExp("menu_div");
        if (!event.target.id.match(re) ) {
            $('#menu').hide();
        }
    }
});

#1