在jQuery中停止项目多次滑动

Question

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

下面的代码可以工作，但是有一个问题，如果我多次单击一个项目，它会上下滑动，因为它被点击了很多次。

是否有办法改进它，以便即使您多次单击同一项，也只能滑动一次。

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

演示

Answer 2

如果元素是动画的，则取消单击事件：

演示

$(".title").click(function(e){
    if($('.item, p').is(':animated')) return;
    e.preventDefault();
    $('.item').removeClass("active");
    $(this).parent().addClass("active");
    $('p').slideUp();
    $(this).next().slideDown();
});

Answer 3

我可能会使用一个简单的if语句来测试父类是否有活动类，如果需要的话，它还可以选择折叠打开的窗格。

工作实例

$(".title").click(function (e) {
    if (!$(this).parent().hasClass('active')) {
        e.preventDefault();
        $('.item').removeClass("active");
        $(this).parent().addClass("active");
        $('p').slideUp();
        $(this).next().slideDown();
    } else { //optionally closes open panes, remove if desired
        $('.item').removeClass("active");
        $('p').slideUp();
    }
});