文章/答案/技术大牛

发布

社区首页 >问答首页 >下拉菜单闪烁，firefox除外

问下拉菜单闪烁，firefox除外
EN

Stack Overflow用户

提问于 2012-07-20 02:30:54

回答 2查看 1K关注 0票数 0

我遇到了一个与这个Drop Down Box Keeps flickering - JQuery and CSS类似的问题，当我将鼠标移到它上面时，下拉菜单会闪烁，只是它似乎不会在火狐中发生。我在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“目录是下拉菜单。当用户在authenticated下单击帐户li时，它会第一次出现，当用户再次单击li或鼠标移出时，它会消失。导航div在css中将其高度设置为40px，所以我认为这可能是定位问题，但将高度设置为auto并没有解决它，我也不能将帐户容器从导航栏中取出，因为这会搞乱它的定位。为什么浏览器检测到从一个菜单项到另一个菜单项的转换是鼠标输出事件，我如何防止它？

编辑：

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

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

drop-down-menu

jquery

html

css

firefox

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-27 03:30:24

通过将hideAccount函数更改为以下内容解决了此问题：

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

问题是，除了火狐之外，所有的浏览器都会检测到从account_container到它的任何子代的移动都是鼠标输出。从技术上讲，当鼠标停留在容器内的某个列表元素上时，由于某种原因，鼠标将不再停留在容器本身。我猜firefox是唯一一个在隐藏之前检查鼠标是否移动到子元素中的浏览器。修复的问题是，在尝试隐藏之前，在javascript中添加检查以查看是否移动到子元素。

票数 0

Stack Overflow用户

发布于 2012-07-20 04:04:35

试试这个：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11567110

复制

相似问题

问下拉菜单闪烁，firefox除外
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单闪烁，firefox除外EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问下拉菜单闪烁，firefox除外
EN