1

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

$('#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>

谢谢你的帮助。

4

4 回答 4

2

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

$('#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;
}
于 2012-06-14T22:25:17.910 回答
1

错误就在这里，我认为：

$('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png";

您只需在此处检查 'src' 属性，但实际上并没有更改它。

请改用以下内容：

var newSrc = $('#slick-img').attr('src') === "/images/up.png" ? "/images/down.png" : "/images/up.png";
$('#slick-img').attr('src', newSrc);
于 2012-06-14T22:22:19.547 回答
0

尝试：

var src_img = ($('#slick-img').attr('src')=="/images/up.png") ? "/images/down.png" : "/images/up.png";
$('#slick-img').attr('src', src_img)
于 2012-06-14T22:20:26.817 回答
0

更改 src 后，您想强制刷新图像。这里有一个问题与一些不错的答案非常相似：

如何用jQuery刷新<img />的src？

于 2012-06-14T22:21:10.917 回答