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

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

Updated Fiddle