Question

我在下面有这个jquery代码，但问题是如果我快速滚动并跳出触发元素并通过菜单，那么它会中断，每次都会逐渐显示更少的元素，直到没有显示任何内容。我可以添加一个计时器或缓和来阻止这种打破吗？

<ul class="buying-dropdown">
 <li><p class="green-button"><a href="#">Read the blog</a></p>
    <ul>
      <li class="first amazon"><a href="#">paperback</a></li>
      <li class="signed"><a href="#">Signed edition</a></li>
      <li class="kindle"><a href="#">kindle edition</a></li>
      <li class="hardback"><a href="#">hardback edition</a></li>
      <li class="last postcard"><a href="#">postcard edition</a></li>
     </ul> </li>

(function ($) {
Drupal.behaviors.weaveoftheride = {
attach: function(context, settings) {

 console.log('called');
$('.buying-dropdown li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(100);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(100);          
        }
    );
}

};
})(jQuery);

Answer 1

您应该强制jQuery清除动画队列，并在使用.stop()方法时跳转到动画的末尾，即.stop(true, true)。

Jquery菜单在快速点击/滚动时打破

1 个答案: