Question

我想知道我是否可以使用jquery，以便当我点击固定的div时，它会将填充添加到另一个div。对于下面的示例，我想在点击40px后将div2填充添加到div1的顶部，再次点击时我想恢复到原始的填充量(20px)。

这是一个小提琴：http://jsfiddle.net/pauljackson/p9LfkLsd/1/

HTML：

<div id="div1">The Pusher</div>
<div id="div2">Push me down!</div>

的CSS：

#div1{
position:fixed;
background-color:red;
color:white;
width:100px;
cursor:pointer;
}

#div2{
padding-top:20px;
background-color:blue;
color:white;
width:100px
}

感谢您的帮助！

Answer 1

在jquery中添加此代码

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

DEMO

Answer 2

试试这段代码

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);
    }
});

这是工作jsfiddle http://jsfiddle.net/pauljackson/p9LfkLsd/1/

Answer 3

您可以使用类来切换填充。

Demo

JS

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

CSS

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

Answer 4

$("#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");
})

如果需要将来使用。 here

单击div以使用jquery将填充添加到另一个div

4 个答案: