0

我遇到了与此类似的问题Drop Down Box Keeps flickering -当我将鼠标移到 JQuery 和 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 对这个问题的回答吗？我可以更改onmouseout="hideAccount()"并onmouseout="hideAccount.call(this)"检测鼠标是否位于 hideAccount 函数内下拉菜单的子元素上吗？如果是这样，我会怎么做？作为参考，这里是 hideAccount 函数：

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

2 回答 2

0

通过将 hideAccount 函数更改为此解决它：

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

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

于 2012-07-26T19:30:24.367 回答
0

尝试这个：

   function toggleAccount(e){
     e.preventDefault();
     $("#account_container").toggle();   
   }
于 2012-07-19T20:04:35.140 回答