Menu 从元素中单击会淡出div

我有一个“移动”菜单，它也在桌面版上 请参见此处：

单击“hamburger”菜单会触发整个包裹div的不透明度。 您可以在链接中看到效果。 我想添加的只是另一个触发器，当菜单打开时，它将关闭菜单，不仅是再次单击汉堡菜单，而且整个屏幕的左侧都是

诸如此类：

这是我在单击时触发的部分代码：

jQuery("#page-cover").css("opacity",0.6).fadeIn(300);

这会使它消失：

jQuery("#page-cover").css("opacity",0.6).fadeOut(300);

谢谢

---

谢谢

您可以定义一个不可见的div，它位于屏幕左侧，通过jQuery检测鼠标点击事件

css

html

---

所以基本上要感谢@Mox
我决定使用现有的“页面封面”div，并将其用作点击触发器，以获得相同的结果：

jQuery("#page-cover").click(function() {
    jQuery(this).animate({
            right : '0',
    })
    jQuery('body').animate({
            right : '0',
    })
    jQuery('.menu').animate({
            right : '-250',
    })
    jQuery(this).css("opacity",0.6).fadeOut(300);
})

工作很有魅力！

---

好的，谢谢。。你的回答基本上给了我一个方向，但我可以使用我现有的“页面封面”div，点击它来获得相同的结果，而不是使用另一个div。非常感谢@Mox

<div class="invisibleLeft"></div>

$(".invisibleLeft").on("click", function(){
    $("#page-cover").css("opacity",0.6).fadeIn(300);
});

jQuery("#page-cover").click(function() {
    jQuery(this).animate({
            right : '0',
    })
    jQuery('body').animate({
            right : '0',
    })
    jQuery('.menu').animate({
            right : '-250',
    })
    jQuery(this).css("opacity",0.6).fadeOut(300);
})