用jQuery切换CSS

Question

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

$('.information').click(function(e){
    $('.work-overlay').fadeOut();
    $('.information-overlay').fadeToggle();
    $('body').toggleClass('overflow');
    e.preventDefault();

});

我有以下代码，当单击.information时，可以切换叠加层，还可以在.information overflow:hidden和toggleClass overflow:hidden之间切换。

但是，如果单击.work和THEN .information ，它将破坏toggleClass 。

Answer 1

$("body").css("overflow", "hidden");

JQUERY CSS

或切换

CSS：

.hidden {
   overflow: hidden;
}

JQUERY：

$("body").toggleClass("hidden");   

Answer 2

您可以为此使用toggleClass 。

Answer 3

用这个

$("body").css("overflow", "hidden");

要添加切换功能，请使用http://api.jquery.com/toggleClass/

的CSS

.b_overflow { overflow:hidden; }'

js

$('body').toggleClass('b_overflow');

OP评论后更新

$('.work').click(function(e){
    $('.information-overlay').fadeOut();
    $('.work-overlay').fadeToggle();
    if($(this).css('display') =='block'){
        $(this).css('overflow','scroll');
    }else{
        $(this).css('overflow','hidden');
    }
    e.preventDefault();
});

Answer 4

jQuery代码：

$("body").toggleClass("hidden");

然后在您的CSS中创建一个类：

.hidden {
  overflow: hidden;
}

Answer 5

这个世界

#("body,html").css("overflow", "hidden");

上面的解决方案是完美的，但是切换页面溢出条会在网站上造成一些滞后，因为页面宽度会有所不同。

Answer 6

使用$('body').toggleClass('overflow-hidden')来切换具有相应CSS样式的CSS类