TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
我個(gè)人只是使用JavaScript代碼在2個(gè)類之間切換。
讓CSS在div上勾勒出您需要的所有內(nèi)容，然后減去背景規(guī)則，然后添加兩個(gè)類（例如：展開和折疊）作為規(guī)則，每個(gè)類具有正確的背景圖像（或背景位置（如果使用精靈））。
帶有不同圖像的CSS
.div {
/* button size etc properties */
}
.expanded {background: url(img/x.gif) no-repeat left top;}
.collapsed {background: url(img/y.gif) no-repeat left top;}
或帶有圖片精靈的CSS
.div {
background: url(img/sprite.gif) no-repeat left top;
/* Other styles */
}
.expanded {background-position: left bottom;}
然后...
帶圖像的JavaScript代碼
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).addClass('collapsed').removeClass('expanded');
}
else
{
$(this).addClass('expanded').removeClass('collapsed');
}
});
}
帶精靈的JavaScript
注意：優(yōu)雅的toggleClass在Internet Explorer 6中不起作用，但是下面的addClass/ removeClass方法在這種情況下也可以正常工作
最優(yōu)雅的解決方案（不幸的是，Internet Explorer 6不友好）
$(function){
$('#button').click(function(){
$(this).toggleClass('expanded');
});
}
$(function){
$('#button').click(function(){
if($(this).hasClass('expanded'))
{
$(this).removeClass('expanded');
}
else
{
$(this).addClass('expanded');
}
});
}
據(jù)我所知，此方法將可在所有瀏覽器中使用，并且與使用腳本中的URL更改相比，使用CSS和類玩起來更舒服。
TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊
有兩種使用jQuery更改背景圖像CSS的方法。
$('selector').css('backgroundImage','url(images/example.jpg)');
$('selector').css({'background-image':'url(images/example.jpg)'});
仔細(xì)查看以注意差異。在第二種方法中，您可以使用常規(guī)CSS并將多個(gè)CSS屬性串在一起。
舉報(bào)