如何修復全屏覆蓋樣式和效果

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