Jquery 下拉菜单仅在 IE 上闪烁答案

【问题标题】：Jquery Drop Down menu blinks only on IEJquery 下拉菜单仅在 IE 上闪烁
【发布时间】：2012-09-26 02:09:21
【问题描述】：

我正在为一个新项目启动一个 Jquery 下拉菜单，它在 Google Chrome、Firefox、Safari 上按预期工作，但在 Internet Explorer 上它当然让我有些头疼。

事情是这样的，看到这个页面 http://www.universidadedoingles.com.br/dev/index.ASP

鼠标悬停在 HOME 菜单上，下拉菜单出现，当您在 IE 中移动链接时，您会看到一些背景闪烁，这在 Chrome 和 ETC 上不会发生。

这是我用来做 dd 菜单的 js 尾声。

<script type="text/javascript">
$(document).ready(function() {   
$("ul.mainmenu li.menuhome").mouseover(function(){
    $(".arrow-spacer").show(); //When mouse over ...
    //Following event is applied to the subnav itself (making height of subnav 150px)
    $(this).find('.submenu').show().animate({height: '150px', opacity:'1'},{queue:false, duration:300})     
});

$("ul.mainmenu li.menuhome").mouseout(function(){ //When mouse out ...
    //Following event is applied to the subnav itself (making height of subnav 0px)
    $(this).find('.submenu').hide().animate({height:'0px', opacity:'0'},{queue:false, duration:200})
});

//menu itembackground color animation           
$("li").hover(function() {
    $(this).animate();},
    function() {
        $(".arrow-spacer").hide();
    }); 
});
</script>

就是这样，我想这可能很简单，但已经几周了，我仍然无法让它工作。

非常感谢。

【问题讨论】：

您测试过哪个版本的 Internet Explorer？ my-debugbar.com/wiki/IETester/HomePage
我不明白为什么要在 li 元素悬停时隐藏“arrow-spacer”？
由于某种原因，如果我不使用那个 hide()，在我第一次悬停 HOME 链接后，箭头间隔不会消失。所以我需要箭头只是在我将鼠标悬停在链接上时显示并在鼠标移出时隐藏。

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

【解决方案1】：

我注意到锚点<a> 标签上有一个边距。我的第一件事是尝试使用填充。 IE 不会像其他浏览器一样对待鼠标悬停在边缘。

【讨论】：

我按照你说的做了，改变了填充的边距，但这不是导致闪烁的原因，还有其他想法吗？谢谢大哥！

【解决方案2】：

在某些情况下，在应该放在其他元素顶部的元素上设置 z-index 会有所帮助。

在你的情况下，我会尝试在 <ul class="submenu"> 上设置 z-index

【讨论】：

嘿，莎拉，我已将 z-index 属性添加到子菜单中，但还是没有成功

【解决方案3】：

不再眨眼！我把一个字hide()改成了stop()，现在iE上没有闪烁了。但是……

在您显示菜单 1 次后，每次您将鼠标放在链接下方或关闭链接时，菜单都会再次显示。

检查一下

www.universidadedoingles.com.br/dev

您将能够看到它的行为

【讨论】：

【解决方案4】：

问题是当您将鼠标悬停在<a> 元素上时，<li> 的焦点会丢失。这是您可以用来克服这个问题的方法。我避免使用 <a> 标记，而是使用 JavaScript 函数将用户发送到首选位置。我使用了 JavaScript 而不是 jQuery，希望让它更加不言自明。

        <script type="text/javascript" src="jquery.js" ></script>
        <script type='text/javascript'>
        $(document).ready(function() {
        $('#n li').hover(function() {
                $('ul', this).slideDown(200);
        $(this).children('a:first').addClass('h');
          }, function() {
        $('ul', this).slideUp(200);
        $(this).children('a:first').removeClass('h');   
      });
        });
        function gotoPage(pnumber){
            var goto;
            if(pnumber==1){
                goto="home.html";
            }else if(pnumber==2){
            goto="watsnew.html";
            }else if(pnumber==3){
                goto="aboutus.html";
            }else if(pnumber==4){
                goto="contactus.html";
            }
            window.location.href=goto;  
        }
</script>

<style type="text/css">
#n {
    padding: 0;
    list-style: none;
    padding-left: 15px;
    padding-right: 15px;
    width:5em;
}
#n li { 
    /*display:inline;*/
    background: none;
    position: relative;
    z-index: 1;
    font-weight:bold;
    margin: 0 auto; 
}
#n li .h { 
    background-color: #fff;
    border-left: 1px solid #CF3;
    border-right: 1px solid #CF3;
    color: #576482;
    height:20px; }
#n ul {
    position: absolute;
    display: none;
    margin: 0; padding: 0;
    list-style: none
    padding-bottom: 3px;
    width:200px;
}   
#n ul li {
    list-style-type:none;
    padding:10px;}
#n ul li:hover {
    background:#960;}

</style>


<div>
<ul id="n">
   <li>MENU
      <ul >
        <li value="1" onclick="gotoPage(this.value)">HOME</li>
        <li value="2" onclick="gotoPage(this.value)">WATS NEW</li>
        <li value="3" onclick="gotoPage(this.value)">ABOUT US</li>
        <li value="4" onclick="gotoPage(this.value)">CONTACT US</li>
      </ul>
   </li>
<ul>
</div>

【讨论】：