Question

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

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

切换完成后更改按钮符号

3 个答案: