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

Question

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

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

正如您在打开叠加层后注意到的那样，它在按下 link 后并没有消失，这是如何实现的？

我试过这个代码

 $('#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/

抱歉，由于某些原因实际的 link 没有显示，但是如果您将鼠标悬停在中心上方，您可以看到光标已激活。那么我怎样才能使它在菜单按钮中显示正确的图标的情况下打开和关闭叠加层。

希望这是有道理的，发现很难解释。但是，如果您 fiddle 与 jsfiddle 在一起，您将理解只是假设 link 位于叠加层的中心。

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

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

How to fix Fullscreen Overlay Styles & Effects

html

javascript

css

navigation

jquery