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

DEMO

Answer 2

如果元素已设置动画，则取消点击事件：

DEMO

$(".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语句来测试父类是否具有活动类，如果需要，还可以选择折叠打开的窗格...

<强> Working Example

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

Answer 4

我不建议使用.stop（），因为它会立即停止动画，如果再次点击则会留下未完成的动画。

我建议检查.item是否有.active类，如果没有，请为其设置动画，如此。

JSFiddle - Here

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


    // Track which item we're referring to
    var item = $(this).parent('.item');
    // If item isn't active
    if(!item.hasClass('active')){
        // Remove all active classes on .item
        $('.item').removeClass('active');
        // Add class to clicked .item
        item.addClass('active');
        // Sliding all paragraphs like before might be bad in 
        // the future. Select .item paragraphs
        $('.item p').slideUp();
        // Find this item's paragraph and slide down.
        item.find('p').slideDown();
    };
});

Answer 5

使用.stop()

$('p').stop().slideUp();
$(this).next().stop().slideDown();

在jQuery中停止项目多次滑动

5 个答案:

DEMO