Question

我正在尝试切换使用slidetoggle时单击的图像。

我有一个链接，下面有一个div。我正在显示并隐藏它，并尝试根据div是否向下滑动来更改图像。

<a href="#" id="login" src="membersignin2.png"><img src="/templates/stat/img/membersignin.png" alt="Member Sign in"></a>
<div id="loginDiv" style="display: none; "></div>

我到目前为止的jquery是

$('#login').click(function(){
    $('#loginDiv').slideToggle('slow',function(){
    })
})

我如何更改图像？

Answer 1

您可以更改图片的src属性：

$('#login img').attr('src','new source');

或者，您可能希望将两个图像添加到代码中，并相应地隐藏/显示它们。

Answer 2

正如slideToggle的文档所述，此函数会滑出一个元素（如果它可见），或者滑入，如果它被隐藏了。因此，您首先要隐藏当前可见的图像然后显示另一个div（另外，您将要在href中移动div，因此选择器正确匹配）

$('#login').click(function(){

   $('#login img').slideToggle('slow',function(){///callback runs when animation ends
          $("#login #loginDiv").slideToggle("slow",function(){});
          // you use a empty callback because you don't need it for the second slideToggle
   })
   return false; // prevent default link action (so you don't have a extra hash in the URL)

})

Answer 3

$('#login').click(function(){
    $(this).contents('img').attr('src','path/to/new/img.jpg');
    $('#logindiv').slidetoggle('slow');
    return false;
});

jquery slideToggle切换出被点击的元素

3 个答案: