Question

我的页面上有一个div（“面板”类），在点击一个段落元素（“翻转”类）时切换打开/关闭，其中有一个图像。

这是HTML：

<div class="panel">Contact info</div>
<p class="flip"><img src="images/contactExpand.png" />Expand</p>

和jQuery：

$(".flip").click(function(){
    $(".panel").slideToggle("slow");
});

到目前为止一切正常，但是当面板div可见时，我希望图像src更改为“contactCollapse.png”。这似乎没有做任何事情（图像保持不变）：

if ($(".panel").is(":visible") == true) {
    $(".flip img").attr("src","../images/contactCollapse.png")
}
else {
    $(".flip img").attr("src","../images/contactExpand.png")
}

我错过了什么吗？谢谢你的帮助！

Answer 1

确保检查动画的 end ，因为无论您在哪个方向制作动画，它都会在开始时显示，如下所示：

$(".flip").click(function(){
  $(".panel").slideToggle("slow", function() {
    $(".flip img").attr("src", $(this).is(":visible")
        ? "../images/contactCollapse.png"
        : "../images/contactExpand.png");
  });
});

Answer 2

您确定网址是否正确？您在原始代码中有images/contactExpand.png，在javascript中有../images/contactExpand.png。

此外 - 您确定此代码正常运行吗？ $(".panel").is(":visible") == true。也许如果您将其更改为$(".panel:visible").length == 1。

Answer 3

这是因为在执行幻灯片之前状态不会改变。尝试将代码放在slideToggle：

的回调中

$(".flip").click(function(){
    $(".panel").slideToggle("slow",function(){
        if ($(".panel").is(":visible")) {
            $(".flip img").attr("src","../images/contactCollapse.png")
        }
        else {
            $(".flip img").attr("src","../images/contactExpand.png")
        }
    });
});

如果使用jQuery可以看到另一个元素，请尝试更改img src

3 个答案: