下拉框持续闪烁- 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的整体大小推到了下一个“行”，在#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));
});

这段代码应该对页面中的所有下拉列表都是可重用的。