为什么不起作用？

Question

$('.proces_colm').click(function(){
    var colm = $(this);
colm.next().slideToggle('normal', function(){ 
colm.css('background-position','left bottom');
});
colm.css('background-position','left top');
});

HTML：

<div class="proces_colm">x</div><!--proces_colm-->
<div class="proces_colm_sub">xx</div><!--proces_colm_sub>

的CSS：

.proces_colm{float:left; width:100%; height:31px; position:relative; margin-top:10px; 
background:#cad7ea url(images/procesArrow.png) left top no-repeat; text-align:left;   
cursor:pointer;}

.proces_colm_sub{float:left; width:100%; position:relative; height:auto; 
background:#add8e6; text-align:left; font-size:1.30em;}

点击列后面会将背景位置更改回“顶部”，但它会保持b.position底部！

Answer 1

我认为你把回调放在错误的位置，第二个参数作为slideToggle，而不是点击

<击>     $（'。procesration_colm'）。点击（function（）{

    var ele = $(this);

    ele.next().slideToggle('normal', function() {

        ele.css('background-position', 'left top');
    });

    ele.css('background-position', 'left bottom');
});

这可能无法按预期工作，但我认为它可以帮助弄清楚如何。

<击>

$('.proces_colm').click(function() {

    var ele = $(this), nxt = ele.next();
    //stop the animation firstly
    ele.next().stop(true).slideToggle('normal', function() {

        if (nxt.is(':hidden')) {

            ele.css('background-position', 'left top');

        } else {

            ele.css('background-position', 'left bottom');

        }
    });

});

Answer 2

解决方法：

$('.proces_colm').click(function(){
    var colm = $(this);
colm.next().slideToggle('normal', function(){ 
    colm.css('background-position','0% 100%');
});
    colm.css('background-position','0% 0%');
});