切換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'); 
    } 
});