除了在Firefox中，下拉菜单闪烁

Question

我遇到类似于Drop Down Box Keeps flickering - JQuery and CSS的问题，当我将鼠标移到它上面时，下拉菜单闪烁，除了它似乎没有在firefox中发生。我在mouseout事件中发出警报，发现每次我从菜单中的<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事件，我该如何防止它？

编辑：

我可以像Andy E那样对this question做出回答吗？我可以将onmouseout="hideAccount()"更改为onmouseout="hideAccount.call(this)"并检测鼠标是否在hideAccount函数内的下拉列表的子元素上？如果是这样，我该怎么办呢？作为参考，这是hideAccount函数：

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

Answer 1

试试这个：

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

Answer 2

通过将hideAccount函数更改为：

来解决此问题

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

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