Question

单击向上/向下箭头以滑动隐藏的div时，将调用此函数。如果div被隐藏，箭头指向下方并在显示div时更改为up。如果显示div，则箭头指向隐藏div并在div关闭时更改为down。我只是想知道是否有更有效的方法来做到这一点，或者这是否正确。感谢。

  function showInfo(info_id) {
    var img_id = '#arrow_'+info_id;
    var div = '#info_'+appointment_id;
    $(div).slideToggle('normal',function() {
        if ($(this).is(':visible')) {
            $(img_id).attr('src',$(img_id).attr('src').replace('_down','_up'));
        }
        else {
            $(img_id).attr('src',$(img_id).attr('src').replace('_up','_down'));
        }
    });}

Answer 1

首先，你拥有的是完全正确的。如果你想稍微缩短它（似乎你可能来自这个问题）并且你使用的是jQuery 1.4+，你可以将一个函数传递给.attr()，如下所示：

function showInfo(info_id) {
  $('#info_'+appointment_id).slideToggle('normal',function() {
    $('#arrow_'+info_id).attr('src', function(i, src) {
      return $(this).is(':visible') ? src.replace('_down','_up')
                                    : src.replace('_up','_down');
    });
  });
}

格式为.attr('attributeToChange, function(index, currentVal) {})，因此您可以非常干净地使用函数中的当前值。

Answer 2

版本略有不同。

$('.accHead').click(function() {
        var $title = this;
        var $toggle =  $(this).next();
        $(this).next().slideToggle('slow',function() {
            if ($('img',$title).length > 0){
                $('img',$title).attr('src', function(i, src) {
                   return  $toggle.is(':visible') ? src.replace('_down','_up')   : src.replace('_up','_down');
                });
            }
});

Answer 3

function HideShowItem(item){  
  var liID = item.getAttribute("id");   
  // First change the url of image     
  var imageUrl = ($('#' + liID).css('display') == "none" ? "url('images/minus.png')" : "url('images/plus.png')");    
  $('#' + liID).css("src", imageUrl);   
  //then use slidetoggle jquery function    
  $("#" + liID).find("ul").slideToggle("slow");    
}

JQuery slideToggle替换图像src

3 个答案: