如何在上次点击完成后执行下一次点击?

时间:2013-05-05 15:40:29

标签: javascript jquery slidetoggle continuous

我的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/

正如您在演示中看到的那样,当您单击该段落时,内容将向上滑动并向下滑动。问题是,如果我非常快地点击该段落多次,那么它会不断地上下移动而不会点击。

我试过了:

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

但是当动画停止时,情况会更糟。有什么想法吗?

2 个答案:

答案 0 :(得分:1)

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

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

Updated Fiddle

答案 1 :(得分:0)

从变量开始:

varClicked = false;

on slideDown使其成为true,仅当它为true时允许slideUp,在SlideUp上,再次将其设为false