切换完成后更改按钮符号答案

【问题标题】：Changing button symbol after the toggle is complete切换完成后更改按钮符号
【发布时间】：2013-05-02 22:39:48
【问题描述】：

所以，我有一个按钮显示和隐藏一个 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>'); 
  } 
});

【问题讨论】：

标签： jquery button toggle

【解决方案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>'); 
    } 
  });
});

【讨论】：

非常感谢，效果很好！我对编码很陌生，只是让我的工作像它一样工作是一段旅程。

【解决方案2】：

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

【讨论】：

【解决方案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>'); 
          } 
      });
});

【讨论】：