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');
    }

});

}）;

我的jsfiddle是：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');

DEMO

图像变化＆amp;内容崩溃onclick在jquery中

1 个答案: