当鼠标悬停在第一个链接以外的下拉链接上时，jQuery 下拉菜单会向上滚动

Question

我有一个基于 Stu Nicholls CSS 多级下拉菜单的 jQuery 菜单。

我一直在努力添加动画下滑效果，但遇到了一个奇怪的问题。

当您将鼠标悬停在顶级列表项上时，嵌套的 ul 会向下滑动。当您将鼠标悬停在第一个锚链接上时，导航保持打开状态，但是当您将鼠标悬停在下面的任何锚链接上时，ul 就会开始向外滑动并反复上下滑动。

如果您将鼠标悬停在顶级列表项上，然后将鼠标直接向下拉到下拉列表上，然后快速将其关闭，似乎会发生类似的问题。

这是我正在处理的测试页面

有关此问题的任何帮助 那就太好了！

Answer 1

你的问题似乎在这里，

$('#nav ul li').hover(

  //Opens drop down
  function () { 
    $(this).addClass('active');
    $("#nav ul li.active ul").slideDown(200);
  },

  //Closes drop down
  function () {
    $("#nav ul li.active ul").slideUp(100);
    $(this).removeClass('active');

  }
);

因为你绑定到选择器 $('#nav ul li')，并且每个导航项都是一个单独的 LI，当你从一个 LI 移动到下一个 LI 时，发生鼠标移出和鼠标悬停。我猜测发生这种情况是因为元素在这段时间“移动”，导致重复发生鼠标悬停/移出事件。

您可能想尝试绑定到不同的元素，例如 UL。