Jquery 下拉菜单仅在 IE 上闪烁

Question

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

事情是这样的， 请参阅此页 http://www.universidadedoingles.com.br/dev/index.ASP

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

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

<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>

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

多谢。

Answer 1

我注意到锚点 标签上有一个边距。我的第一件事是尝试使用填充来代替。 IE 对待边缘悬停的方式与其他浏览器不同。

Answer 2

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

在您的情况下，我会尝试在

上设置 z-index

Answer 3

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

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

检查这个

www.universidadedoingles.com.br/dev

你将能够看到它的行为

Answer 4

问题是，当您将鼠标悬停在 元素上时，

的焦点就会丢失。
您可以使用以下方法来克服这个问题。我避免使用 标签，而是使用 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>