slideToggle issue with stop()

Question

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

С помощью этого куска кода jQuery можно вставлять и перемещать элементы. Но проблема в том, что когда кто-то быстро нажимает, слайд выходит только до достижения максимальной высоты последней достигнутой высоты.

Итак, если кто-то щелкнет по-настоящему быстро, элемент будет только выдвигаться на пару пикселей и сползать назад. Если бы они снова щелкнули, чтобы вытащить ее, она выскользнет только до максимальной высоты, достигнутой в последний раз.

Может ли кто-нибудь помочь мне исправить эту проблему, чтобы сделать эту работу надлежащей?

PS: Высота элемента p устанавливается в auto, поэтому она автоматически соответствует высоте содержимого внутри (возможно, эта деталь поможет с вашим ответом).

Answer 1

Попробуйте это:

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

Answer 2

Вместо того, чтобы использовать функцию click, чтобы прикрепить событие щелчка, используйте one вместо:

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

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

, а затем повторно прикрепить событие в функции.

Answer 3

Если вы действительно хотите обработать дополнительные клики (а не игнорировать их), то вы хотите использовать .stop(true, true), чтобы остановить предыдущую анимацию и перепрыгивать его к выводу, так что ваш следующий анимация может работать, как вы хотите:

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

Всякий раз, когда вы запускаете анимацию из клики пользователя, вы должны знать о .stop() и выяснить, какие аргументы вы хотите использовать с этим для данной ситуации. Без него анимации могут накапливаться в очереди и запускаться последовательно, что обычно не то, что вы хотите.

Вот jQuery reference info на .stop() и это аргументы.