下拉框不断闪烁 - JQuery 和 CSS

Question

我在一些非常基本的事情上遇到了困难。我正在尝试用 JQuery 和 CSS 实现一个下拉框。我不明白为什么当我将鼠标悬停在“产品”链接上时，我的下拉框不断闪烁。

这是我正在做的事情的演示。 http://174.132.101.73/~ree/header/

如果有任何帮助，我将不胜感激。

编辑

好吧，可以通过查看我给出的链接的源代码找到代码。您可能需要显示/隐藏下拉框的主要部分是这样的，以及 CSS：

 $(document).ready(function(){
  $('li.headlink').hover(
   function() { $('ul', this).css('display', 'block'); },
   function() { $('ul', this).css('display', 'none'); });
 });

Answer 1

#header_wrapper 的宽度固定为 950px，#logo 和 #nav 浮动在其中。由于 #logo 为 250 像素，因此为 #nav 中的内容留下了 700 像素（其元素也是浮动的）。

一切都很好，直到“产品”子菜单变得可见。然后，由于额外的内容，它的 .headlink 变得更宽，这将 #nav 的整体大小推到了被迫向下到下一个“行”的位置，如下所示#logo。这就是浮动元素的工作方式；它们水平地填充空间，直到某个块太大并被推到第一个块下方。

闪烁是由于 :hover 不再处于活动状态且子菜单被隐藏所致。然后一切又回到原来的样子。只是鼠标指针仍然在那里，因此现在 :hover 再次处于活动状态。重复。

我不确定如何解决它，但在我看来，这就是问题所在。也许您可以改变元素的嵌套方式，或者不要浮动导航部分。为了快速修复，您可以将 #header_wrapper 宽度更改为更大的值，例如 1450px，只是为了查看“产品”子菜单的行为方式，并解决其问题。

Answer 2

好吧，过去 15 分钟我一直在解决这个问题，终于找到了实际的解决方案。

我过去编写过下拉菜单，很好，并且想知道为什么我现在使用可靠的代码和超时而遇到此闪烁问题。

好吧，我发现我使用了错误的 Jquery 事件。不要使用 jquery HOVER 事件，而是使用 jquery mouseover 事件和 mouseout 事件。这将解决与 HOVER 相关的问题。

接下来设置隐藏超时，显示时清除超时，隐藏前清除超时。将其设置为您希望菜单在滚动时显示的时间。

如果您在悬停时使用超时，但仍然出现闪烁，请务必使用 mouseover 事件。

$(".btn").mouseover(function() {
    clearTimeout(this.timeout);
    $(this).addClass("hover"); 
    /* can add class, or manually set menu visible, i prefer using CSS class */
}).mouseout(function() {
    clearTimeout(this.timeout);
    /* clear timeout in case 2 mouseout events fire at same time */
    this.timeout = setTimeout($.proxy(function() {
        $(this).removeClass("hover");
    }, 300));
});

此代码应该可重复用于页面中的所有下拉菜单。