如何修复全屏叠加样式和效果

Question

我试图在单击导航中的菜单链接后使覆盖效果消失，并使触发此效果的按钮恢复其原始状态。

这就是它的作用 http://tympanus.net/Development/FullscreenOverlayStyles/#

正如您在打开叠加层后注意到的那样，按下链接后它不会消失如何实现？

我尝试了这段代码

 $('#overlay-menu ul li a').click(function(){
  $("#overlay").slideUp("fast");
  $(".button_container").removeClass("active");

});

 $('.button_container').click(function(event){
  $("#overlay").slideDown("fast");
  $(".button_container").removeClass("active");

});

这确实有效，但按钮应用了不正确的操作，它只能在它具有“X”图标而不是菜单图标时工作。

JSFIDDLE

http://jsfiddle.net/HT9Bx/566/

抱歉，由于某种原因，实际链接没有显示，但如果您将鼠标悬停在中心，您可以看到光标已激活。那么如何使用菜单按钮中显示的正确图标打开和关闭叠加层。

希望这是有道理的，但很难解释。但是，如果您摆弄 jsfiddle，您就会明白，假设链接位于叠加层的中心。

Answer 1

因为同一个元素有 3 次点击事件。 取消注释$(".button_container").removeClass("active");

$('#overlay-menu ul li a').click(function(){
  $("#overlay").slideUp("fast");
  //$(".button_container").removeClass("active");
});

$('.button_container').click(function(event){
  $("#overlay").slideDown("fast");
  //$(".button_container").removeClass("active");
});

$('#toggle').click(function() {
 $(this).toggleClass('active');
 $('#overlay').toggleClass('open');
});

Demo