通过JQuery添加CSS

Question

我通过按钮点击通过Jquery切换（.red）类。当元素具有红色类时，我需要通过JQuery动态地给它一个margin-top（比如50px），而不是默认情况下在类中。切换工作正常，但没有添加保证金顶部：代码下面与链接到小提琴。我错过了什么？

$('button').click(function() {
    $('.demo').toggleClass('red');
    $('.red').css('margin-top','10px');
});

[小提琴] http://jsfiddle.net/vineetgnair/wb3jd3vn/1/

谢谢大家。

Answer 1

边距已经设置好，但是你需要让它以可以清除边距而不是折叠的方式显示。为了您的观点，我添加了一个边框来显示可见性：

body {overflow: hidden;}

此外，最好使用相同的jQuery对象！

$('button').click(function() {
    $('.demo').toggleClass('red').css('margin-top','10px');
});

小提琴：http://jsfiddle.net/wb3jd3vn/4/

以上代码将始终只添加一个高度10px的边距！如果您想在每次用户点击时增加保证金，则需要执行以下操作：

$('button').click(function() {
    $('.demo').toggleClass('red').css('margin-top', parseInt($('.demo').css('margin-top').substring(0, ($('.demo').css('margin-top').length - 2))) + 10 + "px");
});

小提琴：http://jsfiddle.net/praveenscience/wb3jd3vn/9/

如果您只需要切换边距，可以在.red类中进行设置：

.demo.red {margin-top: 10px;}

只需将代码缩减为：

$('button').click(function() {
    $('.demo').toggleClass('red');
});

小提琴：http://jsfiddle.net/praveenscience/wb3jd3vn/10/