JQuery скрипт работает только в IE 7, но мне нужна перекрестная совместимость - PullRequest
Новая
       17

JQuery скрипт работает только в IE 7, но мне нужна перекрестная совместимость

1 голос
/ 14 сентября 2010

Любая причина, по которой этот скрипт не будет работать ни в каком другом браузере.ЗДЕСЬ JsFiddle

Эффект в IE 7, который является правильным ... заключается в том, что меню прокручивается вниз и при наведении курсора на пункты меню, и они анимируются, сдвигаясь вправо для«при наведении» на <li> object.

Эффект в FF 3.5 равен неверно .Выпадающие меню будут прокручиваться вниз при наведении курсора мыши и оставаться прокручиваемыми до тех пор, пока вы не наведите курсор мыши.Анимация мерцает и не сдвигает зависшую ячейку.

Я использую это в заголовке 

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

1 Ответ

1 голос
/ 14 сентября 2010

Это выглядит весело, когда вы запускаете его! Как весело, все вокруг так меняется.

Хорошо, это из документации по 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");
});
...