下拉框保持闪烁 - 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 是250px，因此 #nav （其元素也会浮动）的内容为700px。

在“产品”子菜单变得可见之前，一切都很合适。然后它的 .headlink 变得更宽，由于额外的内容，它将 #nav 的整体大小推到了强制下一个“line”的位置，在 #logo 下面。这是浮动元素的工作方式;它们水平填满空间，直到某个块太大而被推到第一个块下方。

闪烁是因为：hover 不再处于活动状态且子菜单被隐藏。然后一切都回到原来的样子。除了鼠标指针仍在那里，现在：hover 再次激活。重复。

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

Answer 2

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

我在过去编写了下拉列表，很好，并且想知道为什么我现在遇到这个闪烁的问题，因为我使用的是固定代码和超时。

好吧，我发现我使用了错误的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));
});

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