jquery - 切换 CSS Jquery

Question

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

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

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

单击时#hideslider，它会显示/隐藏#slider. #hideslider在 css 中使用向上箭头作为背景图像。有没有办法在#slider不显示向下箭头时更改此背景图像。例如，如果#sliderdisplay 是，'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');
    }
});