用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();

});

I've got the following code that toggles an overlay, when .information is clicked and also toggles between overflow:hidden with toggleClass .

However, if I click .work and THEN .information , it breaks the toggleClass .

Answer 1

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

JQUERY CSS

Or to toggle

CSS:

.hidden {
   overflow: hidden;
}

JQUERY:

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

Answer 2

您可以为此使用toggleClass 。

Answer 3

use this

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

to add toggle functionality use http://api.jquery.com/toggleClass/

css

.b_overflow { overflow:hidden; }'

js

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

updated after OP's comment

$('.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 code:

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

And then create a class in your css:

.hidden {
  overflow: hidden;
}

Answer 5

this will world

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

the above solutions are perfect but toggling away body overflow bar will create a little lag on the website since page width will have difference.

Answer 6

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