removeClass 不起作用 - 没有删除类答案

【问题标题】：removeClass doesn't work - class isn't removedremoveClass 不起作用 - 没有删除类
【发布时间】：2017-02-12 11:37:39
【问题描述】：

我正在制作一个带有 burger-btn 的移动菜单，它会触发全宽覆盖。

这可行，但滚动覆盖层后面的内容时出现问题。我用了这行代码

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

有了这行 CSS，覆盖层后面的滚动就会被清除。

.fixedPosition {
  overflow: hidden;
}

问题是这样的——关闭覆盖时，这个类.fixedPosition 没有按应有的方式删除。

有没有人能解决这个问题？

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

【问题讨论】：

标签： jquery html css navigation overlay

【解决方案1】：

这似乎对我有用

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

});

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

编辑：

在您的代码正常运行后添加$('body').toggleClass("fixedPosition");。

【讨论】：

是的，它似乎对我有用。我需要这一行：'if($('.nav-container').is(':visible')) {' 吗？会不会是这样，因为这似乎也有效：jsfiddle.net/bdL76s59/4
对不起，我之前的评论错了，你不需要了:)

【解决方案2】：

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

 menu.fadeToggle(function(){

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

                         }
                        });

见小提琴：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：