Javascript 单击div以使用jquery向另一个div添加填充

我想知道我是否可以使用jquery，这样当我单击一个固定的

div

时，它会向另一个

div

添加填充。对于下面的示例，我想在单击

div1

后将

40px

填充添加到

div2

的顶部，再次单击时，我想恢复到原始填充量

（20px）

这是一把小提琴：

html:

---

谢谢你的帮助

在jquery中添加此代码

$('#div1').on('click', function(){
    var padding = $('#div2').css('padding-top');
    var newPadding = (padding=='20px')?'40px':'20px';
    $('#div2').css('padding-top',newPadding);
})

试试这段代码

var defaultPadding="20px";
$("#div1").click(function(){
    var padding=$("#div2").css("padding-top");
    if(padding!="40px"){
         $("#div2").css("padding-top","40px");
    }else{
         $("#div2").css("padding-top",defaultPadding);
    }
});

---

下面是JSFIDLE

，您可以使用一个类来切换填充

JS

CSS

---

如果将来需要使用

我想知道为什么我的JSFIDLE没有更新按钮。和你的一样？：）@如果答案解决了你的问题，paulj就接受吧。这将有助于未来的观众。是的，我只是在等待它让我

$('#div1').on('click', function(){
    var padding = $('#div2').css('padding-top');
    var newPadding = (padding=='20px')?'40px':'20px';
    $('#div2').css('padding-top',newPadding);
})

var defaultPadding="20px";
$("#div1").click(function(){
    var padding=$("#div2").css("padding-top");
    if(padding!="40px"){
         $("#div2").css("padding-top","40px");
    }else{
         $("#div2").css("padding-top",defaultPadding);
    }
});

$('#div1').click(function(){
    $('#div2').toggleClass('addPadding');
});

.addPadding {
    padding-top:40px !important;
}

$("#div1").click(function(){
    var lastpad = $("#div2").css("padding-top").replace(/[^-\d\.]/g, '');
    var addpad = 40;
    var newpad = parseInt(lastpad) + addpad;
    $("#div2").css("padding-top", newpad+"px");
})