jQuery 增量添加 css 值

Question

我想在此 css 更改中添加或减去“top”的值。我想在外部 css 提供的当前值上添加 20px，而不是指定特定的像素数量。

目标是使列表向上或向下移动。

$('.up').click(function(){
   $('.list').css('top','-20px');
});

HTML

<div id="container">
    <ul class="list">
        <li >first item</li>
        <li class="active">second item</li>
        <li>third item</li>
        <li >fourth item</li>
    <ul>
</div>   
<a href="#" class="up">up</a>
<a href="#" class="up">down</a>​

Answer 1

基于您的编辑:

$('.up').click(function(){
   $('.list').css({position:'absolute', top: parseInt($('.list').css('top'), 10) + 20 + 'px'});
});

或者您可以在使用 animate 时每次点击添加 20px，如下所示:

$('.up').click(function(){
   $('.list').css({position:'absolute'});
   $('.list').animate({top: '+=20'});
});

<小时/>

除非您还指定了position，否则top属性将不起作用:

$('.up').click(function(){
   $('.list').css({position:'absolute', top:'-20px'});
});

根据您的需要将位置更改为绝对或相对。

请注意，如果您希望在更改 top 时使 .list 元素仅出现在其容器内，则需要将 position:relative 分配给父元素和 absolute 到 .list 元素。