切换CSS jQuery的

Question

我使用此代码显示/隐藏内容：

$(function(){ 
    $('#slider').css('display',''); 

    $('#hideslider').click(function(){ 
    $('#slider').slideToggle('slow'); 
    $(this).toggleClass('slideSign'); 
    return false; 
    }); 
}); 

当点击#hideslider它显示/隐藏#slider内容。 #hideslider在css中使用向上箭头作为背景图像。当#slider未显示为向下箭头时，是否有办法更改此背景图像？例如，如果#slider显示为'none'，则在#hideslider中显示不同的背景图像。感谢帮助。

Answer 1

为将使用向下箭头的类创建新的CSS定义。

.down-arrow{ 
    background:url('/path/to/my/downarrow.ext') other-properties; 
} 

然后访问slideToggle函数内的回调来评估元素的显示状态。

$('#slider').slideToggle('slow', function(){ 
    //here we have the callback, the slide has finished, and now we can evaluate 
    if($(this).css('display') == 'none'){ 
     //We know that we should add the class.. 
     $('#hideslide').addClass('down-arrow'); 
    }else{ 
     $('#hideslide').removeClass('down-arrow'); 
    } 
});