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

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

Answer 2

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

在您的情况下，我会尝试在z-index

上设置<ul class="submenu">

Answer 3

不再眨眼了！我将一个单词hide（）更改为stop（），现在iE上没有闪烁。但...

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

检查这个

www.universidadedoingles.com.br/dev

你将能够看到它的行为

Answer 4

当您将鼠标悬停在<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>

Jquery下拉菜单仅在IE上闪烁

4 个答案: