javascript - 在 jQuery 中停止项目多次滑动

Question

我想创建一个基本的切换列表。单击项目标题应向下滑动其内容，并向上滑动任何其他项目内容。

下面的代码可以运行，但是有一个问题，如果我多次点击一个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/

Answer 1

.stop() 将清除特定元素队列中的动画。这样不必要的点击就会被忽略。请阅读本文以了解更多关于 .stop() 的信息

试试这个，

$(".title").click(function(e){
    e.preventDefault();
    $('.item').removeClass("active");
    $(this).parent().addClass("active");
    $('p').slideUp();
    $(this).next().stop().slideDown();
});

DEMO