切换html页面正文的css样式

Question

我有一个sample here我试图使用jquery切换身体的CSS样式，

 $('body').toggle( function () {
        (this).css('padding-top', '0px');
        (this).css('background-color', 'green');
    },
        function() {
        (this).css('padding-top', '50px');
        (this).css('background-color', 'yellow');
       });

但是当我点击按钮时，身体完全消失了。我怎样才能实现同样的目标？

Answer 1

尝试使用toggleClass

http://jsfiddle.net/nwL67ao4/1/

CSS：

body {
    padding-top: 50px;
    background-color: yellow;
}
.hide {
    padding-top: 0px;
    background-color: green;    
}

JS：

$('button').click(function() {    
    $('body').toggleClass("hide");
});

HTML：

<button>ABCD</button>