下拉菜单闪烁，Firefox 除外答案

【问题标题】：Drop down menu flickering except in firefox下拉菜单闪烁，Firefox 除外
【发布时间】：2012-07-19 18:30:53
【问题描述】：

我遇到了与Drop Down Box Keeps flickering - JQuery and CSS 类似的问题，当我将鼠标移到它上面时，下拉菜单会闪烁，但它似乎在 Firefox 中没有发生。我在鼠标悬停事件中放置了一个警报，发现每次我从一个<li> 移动到菜单内的另一个时，都会触发警报。这是它背后的html代码的重要部分。

<!--// HEADER BAR //-->
<div id="header">
<!--// NAVIGATION LINKS //-->
<div id="navigation">
    <!--// AUTHENTICATED //-->
    <div id="options" class="authenticated">
        <ul>
        <li><a href="javascript: toggleAccount()" class="account" title="Account">/</a></li>
        </ul>
    </div>
    <!--// ACCOUNT MENU //-->
    <div id="account_container" style="display: none;" onmouseout="hideAccount();">
        <div id="account">
            <ul>
            <li>Options...</li>
            </ul>
        </div>
    </div>
</div>
</div>

如您所见，“account_container”div 是下拉菜单。它首先出现在用户单击经过身份验证的帐户 li 时，然后在用户再次单击 li 或鼠标移出时消失。导航 div 在 css 中将其高度设置为 40px，所以我认为这可能是链接问题中的定位问题，但是将高度设置为 auto 并没有解决它，我无法将帐户容器取出导航栏，因为这会弄乱它的定位。为什么浏览器会检测到从一个菜单项切换到另一个菜单项作为 mouseout 事件，我该如何防止它？

编辑：

我可以像安迪 E 对this question 的回答那样做吗？我可以将onmouseout="hideAccount()" 更改为onmouseout="hideAccount.call(this)" 并检测鼠标是否位于 hideAccount 函数内下拉菜单的子元素上吗？如果是这样，我会怎么做？作为参考，这里是 hideAccount 函数：

function hideAccount(){
//alert("mouse out!");
$(".account_container").hide();
}

【问题讨论】：

您提供的 CSS 看起来像是下拉菜单的 CSS，而不是父容器，即 #navigation。请显示#navigation 的相关CSS。
这就是我能找到的全部。我之前没有注意到定义的高度，可能就是这样，但这并不能解释为什么它不会在 Firefox 中发生。我会让前端程序员调查一下。
@Ohgodwhy 将高度设置为自动并没有解决它，只是弄乱了它周围所有东西的对齐方式。尝试将菜单移出导航容器也是如此。我发现浏览器正在检测将鼠标移动到帐户容器的子元素作为鼠标移出，如链接问题中所示。我只是不确定我能做些什么。

标签： jquery html css firefox drop-down-menu

【解决方案1】：

试试这个：

   function toggleAccount(e){
     e.preventDefault();
     $("#account_container").toggle();   
   }

【讨论】：

【解决方案2】：

通过将 hideAccount 函数更改为这样来解决它：

function hideAccount(event){
var to = event.relatedTarget || event.toElement;
if(this.contains(to)){
    return;
}
else{
    $(this).hide();
}
}

问题是除了 Firefox 之外的每个浏览器都检测到从 account_container 到它的任何子级的移动作为鼠标移出。从技术上讲，当鼠标悬停在容器内的某个列表元素上时，由于某种原因，它不再位于容器本身之上。我猜firefox是唯一一个在隐藏之前检查鼠标是否移动到子元素的浏览器。解决方法是在 javascript 中检查我是否在尝试隐藏之前移动到子元素。

【讨论】：