2017-02-12 119 views
2

我正在制作一个带有burger-btn的手机菜单,它会触发全宽覆盖。removeClass不工作 - 类不会被删除

这很有效,但是在叠加层后面滚动内容时发生了问题。我使用这行代码

if($('.nav-container').is(':visible')) { 
    $('body').addClass("fixedPosition"); 
} else { 
    $('body').removeClass("fixedPosition"); 
} 

使用这行CSS,覆盖层后面的滚动将被清除。

.fixedPosition { 
    overflow: hidden; 
} 

问题是这样的 - 关闭叠加层时,这个类.fixedPosition 不会被删除,因为它应该是。

有没有人有解决这个问题?

见我的小提琴:https://jsfiddle.net/bdL76s59/1/

回答

0

这似乎在我的小提琴

if($('.nav-container').is(':visible')) 
    { 
     $('body').toggleClass("fixedPosition"); 
    } 

}); 

https://jsfiddle.net/bdL76s59/2/

编辑工作:

添加$('body').toggleClass("fixedPosition");你的代码工作正常后。

+0

是的,它似乎在我的小提琴工作。 (':':visible')) {' ''('('。')')。 难道它只是这样,因为这也似乎工作:https://jsfiddle.net/bdL76s59/4/ – DWTBC

+0

对不起,我以前的评论是错误的,你不需要那个:) – Gijsberts

+0

不错,谢谢很多。 – DWTBC

0

这是因为您的条件在切换事件完成之前执行。试试这个:

menu.fadeToggle(function(){ 

         if($('.nav-container').is(':visible')) 
         { 
          $('body').addClass("fixedPosition"); 
         } 
         else 
         { 
          $('body').removeClass("fixedPosition"); 

         } 
         }); 

见琴:

https://jsfiddle.net/bdL76s59/3/

-1

fadeToggle()需要一些时间来完成动画的不透明度。 直到它没有完成display属性不会从block切换到none,但是您的代码将检查菜单在开始淡入淡出动画后是否可见,因此它仍然可见。你的其他块永远不会运行。 要使其工作根据需要,你必须把你的类操作代码到fadeToggle()完整的回调:

menu.fadeToggle(function() { 
    if($('.nav-container').is(':visible')) 
    { 
     $('body').addClass("fixedPosition"); 
    } 
    else 
    { 
     $('body').removeClass("fixedPosition"); 
    } 
});