jquery 脚本仅适用于 IE 7 但我需要交叉兼容性

Question

关于此脚本无法在任何其他浏览器中运行的任何原因。这是 JsFiddle

在 IE 7 中的效果，这是正确的......是菜单向下滚动当您将鼠标悬停在菜单项上时，它们会通过向右移动来实现

的“悬停时”动画。对象。

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

当你运行它时，这看起来很搞笑！多么有趣啊，一切都这样变化着。

好的，这来自幻灯片切换文档：如果元素最初显示，它将被隐藏；如果隐藏，则会显示。根据需要保存和恢复显示属性。

所以我这样做了，它在 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");
});