javascript - 仅在上一次单击完成时如何执行下一次单击？

Question

我的 HTML：

<div>
    <p>Testing Paragraph</p>
    <span>Testing Span</span>
    <div class="content">This is the main content of this div</div>
</div>

我的 jQuery：

$('p').click(function () {
    $(this).parent().find('.content').slideToggle('slow');
});

小提琴：http: //jsfiddle.net/Vs5DX/

从demo中可以看到，点击段落内容会上下滑动。问题是，如果我非常快速地多次单击该段落，那么它会不断地上下移动而不单击。

我试过了：

$(this).parent().find('.content').stop(true).slideToggle('slow'); 

但是当动画停止播放时，情况会更糟。有任何想法吗？

Answer 1

您可以使用:not排除当前的:animated元素：

$('p').click(function () {
    $(this).parent().find('.content:not(:animated)').slideToggle('slow');
}); 

更新小提琴

Answer 2

从一个变量开始：

varClicked = false;

在 slideDown 上使其为真，仅当它为真时才允许 slideUp，在 SlideUp 上，再次使其为假