我想创建一个基本的切换列表。单击项目标题应向下滑动其内容,并向上滑动任何其他项目内容。
下面的代码可以运行,但是有一个问题,如果我多次点击一个item,点击多少次它就会上下滑动。
有没有办法改进它,即使你多次点击同一个项目,也只滑动一次。
JQuery:
$(".title").click(function(e){
e.preventDefault();
$('.item').removeClass("active");
$(this).parent().addClass("active");
$('p').slideUp();
$(this).next().slideDown();
});
HTML:
<div class="wrap">
<div class="item">
<div class="title">title1</div>
<p>content</p>
</div>
<div class="item">
<div class="title">title2</div>
<p>content</p>
</div>
</div>
看这里的演示,如果你多次点击标题,你会看到:
JSFiddle: http://jsfiddle.net/a7H27/
最佳答案
.stop()
将清除特定元素队列中的动画。这样不必要的点击就会被忽略。请阅读本文以了解更多关于 .stop() 的信息
试试这个,
$(".title").click(function(e){
e.preventDefault();
$('.item').removeClass("active");
$(this).parent().addClass("active");
$('p').slideUp();
$(this).next().stop().slideDown();
});
DEMO
关于javascript - 在 jQuery 中停止项目多次滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20456460/