切换一个背景图像位置

Question

我有下面的代码，显示/隐藏一个div而改变取决于在div是否被显示或不显示的文本：

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     return txt == 'More about us' ? 'Less about us' : 'More about us'; 
    }); 
    return false; 
}); 

在#more链路我有指向下方的箭头（对于'更多关于我们'的文本，当div被隐藏时），但我想要改变这个箭头来指出div何时可见，文本是“Less About us”。我如何编辑上面的代码来做到这一点？

Answer 1

尝试

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     var ret=''; 

     if (txt == 'More about us') { 
      ret = 'Less about us'; 
      $(this).css('background','url(link/to/image1.png)'); 
     }else{ 
      ret = 'More about us'; 
      $(this).css('background','url(link/to/image2.png)'); 
     } 
     return ret; 
    }); 
    return false; 
}); 

礼貌

Toggle text when link is clicked

Answer 2

我想你可以创建两个CSS类，然后只需设置正确的类：

$('#more').removeClass("arrowdown"); 
$('#more').addClass("arrowup"); 

反之亦然，取决于你刚刚设置的文字。

Answer 3

结束了使用一些代码，在更新前一个问题：

$('#more').click(function() { 
    $('#extra').slideToggle('fast'); 
    $('#more').text(function(_,txt) { 
     var ret=''; 

     if (txt == 'More about us') { 
      ret = 'Less about us'; 
      $(this).css('background','url(link/to/image1.png)'); 
     }else{ 
      ret = 'More about us'; 
      $(this).css('background','url(link/to/image2.png)'); 
     } 
     return ret; 
    }); 
    return false; 
});