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");

});

这确实有效，但按钮的动作应用不正确，它只能在有＆＃39; X＆＃39;图标而不是菜单图标。

的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

如何修复全屏叠加样式＆amp;效果

1 个答案: