使用jQuery切换DIV背景图像

Question

我正在为我工作的公司制作一个扩展/折叠呼叫率表。我目前有一个桌子，下面有个按钮来展开它，该按钮说“展开”。除了我需要在单击按钮时将按钮更改为“折叠”，然后在再次单击按钮时将其更改为“展开”之外，此功能正常。按钮上的文字是背景图像。

因此，基本上，我需要做的就是在单击div时更改div的背景图像，除了像切换一样。

Answer 1

我个人只是使用JavaScript代码在2个类之间切换。让CSS在div上勾勒出您需要的所有内容，然后减去背景规则，然后添加两个类（例如：展开和折叠）作为规则，每个类具有正确的背景图像（或背景位置（如果使用精灵））。带有不同图像的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注意：优雅的toggleClass在Internet Explorer 6中不起作用，但是下面的addClass/ removeClass方法在这种情况下也可以正常工作最优雅的解决方案（不幸的是，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');            }        });    }据我所知，此方法将可在所有浏览器中使用，并且与使用脚本中的URL更改相比，使用CSS和类玩起来更舒服。

Answer 2

有两种使用jQuery更改背景图像CSS的方法。$('selector').css('backgroundImage','url(images/example.jpg)');$('selector').css({'background-image':'url(images/example.jpg)'});仔细查看以注意差异。在第二种方法中，您可以使用常规CSS并将多个CSS属性串在一起。