我是这样做的:

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

JS

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

我是这样做的:

CSS

#button{
   background-image: url("initial_image.png");
}

#button.toggled{
  background-image:url("toggled_image.png");
}

JS

$('#button').click(function(){
  $('#my_content').toggle();
  $(this).toggleClass('toggled');
});

我使用正则表达式，因为我想保留一个相对路径，而不使用添加addClass函数。我只是想让它变得复杂，哈哈。

$(".travelinfo-btn").click(
            function() {
                $("html, body").animate({scrollTop: $(this).offset().top}, 200);
                var bgImg = $(this).css('background-image')
                var bgPath = bgImg.substr(0, bgImg.lastIndexOf('/')+1)
                if(bgImg.match(/collapse/)) {
                    $(this).stop().css('background-image', bgImg.replace(/collapse/,'expand'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                } else {
                    $(this).stop().css('background-image', bgImg.replace(/expand/,'collapse'));
                    $(this).next(".travelinfo-item").stop().slideToggle(400);
                }
            }
        );

一种方法是把两个图像放在HTML中，在SPAN或DIV中，你可以用CSS隐藏默认值，或者用JS隐藏页面加载。然后你可以切换到点击。下面是一个类似的例子，我用来把左/下图标放在列表上:

$(document).ready(function(){
    $(".button").click(function () {
        $(this).children(".arrow").toggle();
            return false;
    });
});

<a href="#" class="button">
    <span class="arrow">
        <img src="/images/icons/left.png" alt="+" />
    </span>
    <span class="arrow" style="display: none;">
        <img src="/images/down.png" alt="-" />
    </span>
</a>

我在一个论坛上找到了一个解决方案，切换背景Img。

使用jQuery有两种不同的方法来更改背景图像CSS。

$('选择'). css(“分辨率”,“url(图片/ example.jpg)”); $('选择'). css({“背景图像”:“url(图片/ example.jpg)”});

仔细观察，注意不同点。在第二种方法中，您可以使用传统的CSS并将多个CSS属性串在一起。