下拉框一直闪烁-JQuery和CSS

我在一些非常基本的事情上有困难。我试图用JQuery和CSS实现一个下拉框。我不明白为什么当我在“产品”链接上悬停时，我的下拉框一直在闪烁

这是我正在做的一个演示

如果能在这方面得到任何帮助，我将不胜感激

编辑 代码可以通过查看我提供的链接的源代码找到。您可能需要显示/隐藏下拉框的主要部分是以下内容，以及CSS：

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

#页眉#u包装

的宽度固定在950px，并且

#徽标

和

#导航

在其中浮动。因为

#logo

是250px，所以

#nav

中的元素也会浮动，剩下700px

在“产品”子菜单可见之前，一切都很好。然后，由于额外的内容，它的

.headlink

变得更宽，这会将

#nav

的整体大小推到下一个“行”，即

#logo

下面。这就是浮动元素的工作方式；它们水平地填充空间，直到某个块太大并被压到第一个块下面

闪烁的原因是

：hover

不再处于活动状态，并且子菜单被隐藏。然后一切都回到原来的样子。除了鼠标指针仍然在那里，因此现在

：hover

再次处于活动状态。重复一遍

我不确定我该如何修复它，但在我看来这就是问题所在。也许您可以改变元素嵌套的方式，或者不浮动导航部分。为了快速修复，您可以将

#header#u wrapper

宽度更改为更大的值，例如1450px，只需查看“Products”子菜单的行为，并找出其扭结。

#header#u wrapper

的宽度固定为950px，并且

#logo

和

#nav

在其中浮动。因为

#logo

是250px，所以

#nav

中的元素也会浮动，剩下700px

在“产品”子菜单可见之前，一切都很好。然后，由于额外的内容，它的

.headlink

变得更宽，这会将

#nav

的整体大小推到下一个“行”，即

#logo

下面。这就是浮动元素的工作方式；它们水平地填充空间，直到某个块太大并被压到第一个块下面

闪烁的原因是

：hover

不再处于活动状态，并且子菜单被隐藏。然后一切都回到原来的样子。除了鼠标指针仍然在那里，因此现在

：hover

再次处于活动状态。重复一遍

---

我不确定我该如何修复它，但在我看来这就是问题所在。也许您可以改变元素嵌套的方式，或者不浮动导航部分。为了快速修复，您可以将

#header_wrapper

宽度更改为更大的值，例如1450px，只需查看“Products”子菜单的运行情况，并找出其纠结。

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

我过去对下拉列表进行过编码，很好，我想知道为什么我现在在使用可靠的代码和超时时会遇到这个闪烁的问题

我发现我使用了错误的Jquery事件。不要使用jquery

HOVER

事件，而是使用jquery

mouseover

事件和

mouseout

事件。这将解决

悬停

相关问题

接下来设置隐藏超时，显示时清除超时，隐藏前清除超时。将此设置为当您向外滚动时，希望菜单显示的时间长度

如果您在悬停时使用超时，但仍然会闪烁，请确保使用

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));
});

---

这段代码应该可以重复使用到页面中的所有下拉列表中。

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

我过去对下拉列表进行过编码，很好，我想知道为什么我现在在使用可靠的代码和超时时会遇到这个闪烁的问题

我发现我使用了错误的Jquery事件。不要使用jquery

HOVER

事件，而是使用jquery

mouseover

事件和

mouseout

事件。这将解决

悬停

相关问题

接下来设置隐藏超时，显示时清除超时，隐藏前清除超时。将此设置为当您向外滚动时，希望菜单显示的时间长度

如果您在悬停时使用超时，但仍然会闪烁，请确保使用

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));
});

---

此代码应可重复用于页面中的所有下拉列表。

能否发布显示/隐藏下拉框的代码？哦，这里有一个调试提示：添加一个单独的debug.css文件，其中包含每个元素的“令人震惊”的唯一背景色。在文档回流过程中，观看彩色块相互推挤和抖动是了解发生了什么的好方法。如果你看到一个框移动得很快，有时可以帮助你看到它所对应的内容。你能发布显示/隐藏下拉框的代码吗？哦，这里有一个调试提示：添加一个单独的debug.css文件，其中包含每个元素“令人震惊”的唯一背景色。在文档回流过程中，观看彩色块相互推挤和抖动是了解发生了什么的好方法。如果你看到一个盒子移动得很快，有时可以帮助你看到它所面对的是什么。