Question

$(document).ready(function() {
    $("ul li").click(function() {
        $(this).find("p").slideToggle("normal");
        return false;
    });
});

使用这段jQuery代码，我可以使元素滑入和滑出。但问题是，当有人快速点击时，滑出只会到达最高到达高度的最大高度。

因此，如果某人快速点击该元素，该元素将仅滑出几个像素并向上滑动。如果他们再次点击将其滑出，它只会滑到最后一次达到的最大高度。

有人可以帮我解决这个问题，使其正常工作吗？

PS：p元素的高度设置为auto，因此它会自动匹配内部内容的高度（可能此细节有助于您的回答）。

Answer 1

不使用click函数附加点击事件，而是使用one代替：

$("ul li").one("click", doStuff);

function doStuff(){ 
   // do your stuff here
   $("ul li").one("click", doStuff); // Re-attach event
}

然后在函数中重新附加事件。

Answer 2

试试这个：

$(document).ready(function() {
    $("ul li").click(function() {
        if ( ! $(this).find('p:animated').length)
        {
            $(this).find("p").slideToggle("normal");
            return false;
        }
    });
});

Answer 3

如果您想要实际处理额外的点击（而不是忽略它们），那么您希望使用.stop(true, true)来停止上一个动画并将其跳转到结论，以便您可以根据需要运行下一个动画：

$(document).ready(function() {
    $("ul li").click(function() {
        $(this).find("p").stop(true, true).slideToggle("normal");
        return false;
    });
});

每当您从用户点击触发动画时，您应该了解.stop()并找出在特定情况下要与其一起使用的参数。没有它，动画可以堆积在队列中并按顺序运行，这通常不是你想要的。

以下是.stop()上的jQuery reference info及其参数。

slide（）的slideToggle问题

3 个答案: