jquery腳本只適用於IE 7，但我需要交叉兼容性

Question

任何原因，爲什麼此腳本不能在任何其他瀏覽器中工作。下面是IE 7，這是正確的JsFiddle

的影響......是菜單向下滾動，當你將鼠標懸停在菜單項和他們通過向右移動的「懸停」的<li> object的動畫。

FF 3.5中的效果是不正確。菜單下拉菜單將在您懸停OUT並向下滾動直到懸停IN時向下滾動。動畫閃爍並且不會移動單元格中的懸停。

我的頭

 <script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

使用這一點，這是我的腳本代碼

<div id="menu_container"> 

      <ul id="menu"> 
      <li><a href="#">Home </a></li> 
      <li><a href="#" id="places">About Us</a> 
       <ul id="dropdown1"> 
        <li><a href="http://google.com">Our Founder</a></li> 
        <li><a href="#">Our Mission</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Meet The Team</a> 
       <ul id="dropdown2"> 
        <li><a href="#">Our Founder</a></li> 
        <li><a href="#">Our Directors</a></li> 
        <li><a href="#">Our Teachers</a></li> 
        <li><a href="#">Employment Opportunities</a></li> 

       </ul> 
      </li> 
      <li><a href="#">Testimonials</a> 
       <ul> 
        <li><a href="#">Students</a></li> 
        <li><a href="#">Adults</a></li> 
        <li><a href="#">Corporate</a></li> 
       </ul> 
      </li> 

       <li><a href="#">Programs</a> 
       <ul> 
        <li><a href="#">Student Services</a></li> 
        <li><a href="#">Adult Programs</a></li> 
        <li><a href="#">Business Program</a></li> 
        <li><a href="#">Community</a></li> 
       </ul> 
      </li> 
       <li><a href="#">Press Releases</a> 

      </li> 
      <li><a href="#">Sponsoring Partnerships</a></li> 
     </ul> 

    </div> 
    </div> 
    <div id="mid_header"> 


    </div> 
    <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> 

    </asp:ContentPlaceHolder> 
</div> 
</form> 

<script type="text/javascript" > 


    $(function() { 
     $('#menu li li').hover(function() { 

      $(this).animate({ paddingLeft: '+=15px' }, 300); 

     }, function() { 

      $(this).animate({ paddingLeft: '-=15px' }, 300); 

     }); 

     $("#menu li").hover(function() { 

      $(this).find("ul").slideToggle(400); 

      $(this).find("a").toggleClass("dropdownhoverIn"); 


     }); 


    }); 

</script> 

Answer 1

，當你運行它，這看起來熱鬧！有趣的是，一切都像這樣轉移。好吧，這是從slideToggle文檔：如果元素最初顯示，它將被隱藏;如果隱藏，它會顯示。顯示屬性將根據需要進行保存和恢復。

所以我做了這一點，它在Firefox 3和IE8的表現更好：

$("#menu li ul").hide(); // <--- I added this line 
$("#menu li").hover(function() { 
    $(this).find("ul").slideToggle(400); 
    $(this).find("a").toggleClass("dropdownhoverIn"); 
});