Question

我的下拉菜单有问题。这是脚本：

function topNav() {
  $('.parent').mouseenter(function() {
    $(this).children('ul').stop().slideDown('fast');  
  });    
  $('.parent').mouseleave(function() {
    $(this).children('ul').stop().slideUp('fast');
  });
}

它运行得很好，但是如果我足够快地移动鼠标，那么菜单不会完全下降，它的高度会增加。我不明白为什么会这样，以及如何解决这个问题。有什么建议吗？

谢谢。

Answer 1

$('.parent').mouseenter(function() {
   $(this).parent().find("ul").slideDown('fast').show();
});
$('.parent').mouseleave(function() {
  $(this).parent().find("ul").slideUp('fast').hide();
});

这应该可以正常工作......

Answer 2

这种情况发生在所有鼠标悬停和UX总是讨厌使用鼠标悬停..如果您仍然想要使用它，有一种称为节流的技术将帮助您。插件还实现了限制。实际上它的作用是它在给定时间内只执行一次mousedown事件。 http://benalman.com/projects/jquery-throttle-debounce-plugin/

因此，如果用户快速反复移动鼠标，它将不会多次运行..

Answer 3

我通过添加css（'height'，'auto'）解决了这个问题，就像这个

一样

function topNav() {
  $('.parent').mouseenter(function() {
    $(this).children('ul').stop().css('height','auto').slideDown('fast');  
  });    
  $('.parent').mouseleave(function() {
    $(this).children('ul').stop().css('height','auto').slideUp('fast');
  });
}

移动鼠标光标后，jQuery下拉菜单的高度增加

3 个答案: