图像更改& jquery中的内容崩溃

Question

我一直在尝试使用jquery同时实现折叠、展开和图像切换的功能。

Ans一切正常，除了：

当我单击任何标题时，所有其他内容都会折叠，但只有相同标题的图像正在切换。

jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".heading").click(function() {
    jQuery(this)
        .nextAll(".content:first").slideToggle(500)
        .siblings(".content").slideUp(500);

    var currentimg=$(this).find('img').attr('src');
    if(currentimg=="images/right.png"){
        $(this).find('img').attr('src','images/Down.png');
    }
    else{
        $(this).find('img').attr('src','images/right.png');
    }

});

})；

我的小提琴手是:https://jsfiddle.net/pa1b5g0j/，提前谢谢！

Answer 1

您需要使用Down映像设置其他图像src。见内联注释

//Find current elements image
var img = $(this).find('img');
img.attr('src', function(_, value) {
  if (value == "http://diactral.com/v2/images/right.png") {
    return 'http://diactral.com/v2/images/Down.png';
  } else {
    return 'http://diactral.com/v2/images/right.png';
  }
});

//Set the image apart for all image apart from elements image
jQuery(".heading img").not(img).attr('src', 'http://diactral.com/v2/images/Down.png');

演示