jquery - 切换完成后更改按钮符号

Question

因此，我有一个按钮显示和隐藏一个 ID 为“详细信息”的 div 和一个 ID 为“更多”的按钮，同时使用向上和向下箭头更改点击符号。（它从隐藏细节开始，向下人字形可见。我真正想要的是在切换动画完成而不是点击后发生图像交换（类更改）。我该怎么做？

('#more').click(function() {
  $('#details').toggle('slow');

});
$('#more').click(function() 
{ 
  if ($(this).html() == '<i class="icon-chevron-up"></i>') 
  { 
     $(this).html('<i class="icon-chevron-down"></i>'); 
  } 
  else 
  { 
     $(this).html('<i class="icon-chevron-up"></i>'); 
  } 
});

Answer 1

.toggle()有一个回调。用它！

$('#more').click(function() {
  var $el = $(this);

  $('#details').toggle('slow', function() {
    if ($el.html() == '<i class="icon-chevron-up"></i>') { 
      $el.html('<i class="icon-chevron-down"></i>'); 
    } 
    else { 
      $el.html('<i class="icon-chevron-up"></i>'); 
    } 
  });
});

Answer 2

$('#more').click(function() { 
     var $i = $(this).find('i');
     $('#details').toggle('slow' function(){
         $i.toggleClass("icon-chevron-up icon-chevron-down"); 
     });
});

Answer 3

toggle 方法接受一个函数作为第二个参数，该参数将在函数完成时调用。所以这应该可以解决问题：

('#more').click(function() {
    var self = this;  // you need the self reference in order to keep a reference to the clicked element
  $('#details').toggle('slow', function () 
      { 
          if ($(self).html() == '<i class="icon-chevron-up"></i>') { 
              $(self).html('<i class="icon-chevron-down"></i>'); 
          } 
          else { 
              $(self).html('<i class="icon-chevron-up"></i>'); 
          } 
      });
});