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上閃爍

回答

相關問題