Jquery下拉菜单只在IE上闪烁

我为一个新项目启动了一个Jquery下拉菜单，它在谷歌浏览器，火狐浏览器，Safari浏览器上按预期工作，但当然这让我在Internet Explorer上感到头疼。Jquery下拉菜单只在IE上闪烁

这里的东西，在菜单首页查看鼠标在此页面 http://www.universidadedoingles.com.br/dev/index.ASP

，下拉appers，当你移动了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>

就是这样，我想这可能是简单的，但它一直星期，我仍然无法得到它的工作。

非常感谢。

来源

2011-03-11 Jeff Dias

您测试过哪个版本的Internet Explorer？ http://www.my-debugbar.com/wiki/IETester/HomePage – Sonny 2011-03-11 14:52:02

我不明白你为什么要隐藏“箭头 - 间隔”当李元素被徘徊？ – 2011-03-11 15:23:26

出于某种原因，如果我不使用hide（），在将HOME链接悬停第一次后，箭头 - 间隔符将不会消失。所以我需要箭头才能显示何时将鼠标悬停在链接上，并在我将鼠标移出时隐藏。 – 2011-03-11 15:51:53

我注意到锚点<a>标签对它们有一定的余量。我的第一件事是尝试使用填充代替。 IE不会像使用其他浏览器一样在页边空白处悬停。

来源

2011-03-11 14:55:26 Sonny

我做了你所说的，改变边距来填充，但那不是导致眨眼的事情，还有其他的想法？谢啦！ – 2011-03-11 15:04:25

在某些情况下，它有助于设置z-index放置在其他元素之上的元素。

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

来源

2011-03-11 15:09:00

嘿萨拉，我已经添加了z-index属性的子菜单，仍然没有运气 – 2011-03-11 15:17:03

无闪烁了！我改变了一个词hide（）停止（），现在在iE上没有闪烁。但是...

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

检查这个

www.universidadedoingles.com.br/dev

，你就可以在看到它的行为

来源

2011-03-16 18:40:17

的事情是，焦点<li>丢失，当你的鼠标一个<a>元素。这是你可以用来克服这一点的东西。我避免使用<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>

来源

2012-09-02 09:58:15 aimme

@RegDwight非常感谢提高我的答案。 :) – aimme 2012-09-02 19:12:24

Jquery下拉菜单只在IE上闪烁

回答

相关问题