为什么这个jQuery slideToggle代码不起作用? [英] Why does this jquery slideToggle code not work?

问题描述

我正在尝试更改展开/折叠按钮的按钮文本.基本上，用户单击折叠"，然后执行slideToggle，当完成slideToggle时，我将按钮文本更改为展开"，反之亦然.

下面的代码效果很好，但是如果您快速单击展开/折叠"按钮，它会松动其思路，并在已展开时显示展开"，而在已折叠时显示折叠".

任何提示都值得赞赏.

谢谢！

功能toggleBox(按钮，框){ if($(box).is(:hidden")){ $(box).slideToggle("slow"，function(){ $(button).html(折叠"); }); } 别的 { $(box).slideToggle("slow"，function(){ $(button).html("Expand"); }); } }

解决方案

在您的情况下，设置文本时进行检查比较安全，在完成后，像这样:

function toggleBox( button, box ){ 
  $(box).slideToggle("slow", function(){ 
    $(button).html($(this).is(":hidden") ? "Expand" : "Collapse"); 
  }); 
}

当前您正在检查启动时间，但是请记住，直到完成隐藏它才:hidden，所以直到slideUp完成之前，它仍然是:visible:)

I am trying to alter the button text for a expand/collapse button. Basically, a user clicks "Collapse" and I perform a slideToggle and when the slideToggle is done, I change the button text to "Expand" and vice-versa.

The following code works great however if you click the expand/collapse button rapidly, it looses its mind and shows "Expand" when it's already expanded or "Collapse" when it's already collapsed.

Any tips are appreciated.

Thanks!

function toggleBox( button, box ){ if($(box).is(":hidden")) { $(box).slideToggle("slow", function(){ $(button).html("Collapse"); }); } else { $(box).slideToggle("slow", function(){ $(button).html("Expand"); }); } }

解决方案

In your case, it'd be safer to do the check as you're setting the text, after the animation finishes, like this:

function toggleBox( button, box ){ 
  $(box).slideToggle("slow", function(){ 
    $(button).html($(this).is(":hidden") ? "Expand" : "Collapse"); 
  }); 
}

Currently you're checking when it starts, but remember it's not :hidden until it finishes hiding, so until the moment the slideUp completes, it's still :visible :)

这篇关于为什么这个jQuery slideToggle代码不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！