jQuery下拉菜单向上滚动，当鼠标悬停在下拉链接之后链接到第一个

Question

我有基于on Stu Nicholls CSS multi-level drop down menu的jQuery菜单。

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

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

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

Here is the test page I'm working on

有关此问题的任何帮助 会很好！

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时，会发生mouseout和mouseover。我猜测是因为元素在此期间“移动”，导致重复的鼠标过度/结束事件发生。

您可能想尝试绑定到其他元素，例如UL。