jquery 和交换图像

Question

我有这个简单的切换功能来打开/关闭信息。我想在它旁边添加一个图像，以便它显示展开或关闭。我尝试了这个方法，但没有任何反应。我错过了什么？

$('#slick-software').click(function() {
   $('#slickbox-software').toggle(400);
   $('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png";
   return false;
});

...
...

<a href="#" id="slick-software">
    <img id="slick-img" src="/images/up.png" border="0" align="absmiddle" />&nbsp;&nbsp;
        <b>Software</b><br>
    </a>
<div id="slickbox-software">
    text here
</div>

感谢您的帮助。

Answer 1

更好的解决方案是对上/下图像使用 CSS，您可以将其作为背景图像包含在 #slick-software 元素上(应用一些左侧填充)。然后，您可以在单击处理程序中切换类以更改背景图像，或者最好更改 CSS sprite 的背景位置。 。我也更喜欢调用 PreventDefault，而不是返回 false 来覆盖默认单击行为，因为返回 false 停止 event bubbling 。

$('#slick-software').click(function(e) {
   $('#slickbox-software').toggle(400);
   $(this).toggleClass("expanded");
   e.preventDefault();
});

然后在你的CSS中，类似:

#slick-software{
  display: inline-block;
  padding: 0 0 0 20px;
  background: url(img/toggle.png) no-repeat 0 0;
}

#slick-software.expanded{
  background-position: 0 -50px;
}