Question

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

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

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

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

Answer 1

您可以使用变量。

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

<强>的JavaScript / jQuery的：

<强> 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();
            }
        }
});

Answer 2

我使用此代码：

// 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();
        }
    }
});

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

2 个答案: