切换完成后更改按钮符号

时间:2013-05-02 22:39:49

标签: jquery button toggle

因此,我有一个按钮显示并隐藏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>'); 
  } 
});

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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

答案 2 :(得分:0)

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