如何修复全屏覆盖样式和效果

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

因为您有三次点击同一元素的事件。 取消对$(".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