Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Меню не работает должным образом в IE7,6 (https://javascript.ru/forum/jquery/9520-menyu-ne-rabotaet-dolzhnym-obrazom-v-ie7-6-a.html)

ermax 21.05.2010 23:17

Меню не работает должным образом в IE7,6
 
Написал меню
$(document).ready(function(){

    $("a#menua").hover(
      function () {
        //alert('fsf');
        var img = $(this).find('img');
        $("#"+img[1]['id']).fadeIn(175, function () {
           $("#"+img[1]['id']).css("display", "");
        });
      },
      function () {
        var img = $(this).find('img');
        $("#"+img[1]['id']).fadeOut(175, function () {
           $("#"+img[1]['id']).css("display", "none");
        });
      }
    );

});


Само меню

<div class="menu">
            <ul>
                <li>
                   <a href="#" id="menua">
                      <img src="sys_file/design/menu.1.1.png" width="150" height="41" border="0" id="menu11" /><img src="sys_file/design/menu.1.2.png" width="150" height="41" border="0" id="menu12" style="display: none; margin-left: -150px;" />
                   </a>
                </li>
                <li>
                   <a href="#" id="menua">
                      <img src="sys_file/design/menu.2.1.png" width="140" height="41" border="0" id="menu21" /><img src="sys_file/design/menu.2.2.png" width="140" height="41" border="0" id="menu22" style="display: none; margin-left: -140px;" />
                   </a>
                </li>
                <li>
                   <a href="#" id="menua">
                      <img src="sys_file/design/menu.3.1.png" width="116" height="41" border="0" id="menu31" /><img src="sys_file/design/menu.3.2.png" width="116" height="41" border="0" id="menu32" style="display: none; margin-left: -116px;" />
                   </a>
                </li>
                <li>
                   <a href="#" id="menua">
                      <img src="sys_file/design/menu.4.1.png" width="103" height="41" border="0" id="menu41" /><img src="sys_file/design/menu.4.2.png" width="103" height="41" border="0" id="menu42" style="display: none; margin-left: -103px;" />
                   </a>
                </li>
            </ul>
        </div>


Помогите плиз, не понимаю почему ие не хочет нормально работать.
Причем срабатывает в ие только первая ссылка меню, отсальные несрабатывают.

micscr 22.05.2010 07:48

Вот от этого:
$("#"+img[1]['id'])

избавляйтесь
img тут - коллекция и ее нужно использовать:
var img = $(this).find('img');
img.eq(i).fadeIn ...

ermax 22.05.2010 13:44

Сделал
$(document).ready(function(){

    $("a#menua").hover(
      function () {
        //alert('fsf');
        var img = $(this).find('img');
        img.eq(1).fadeIn(175, function () {
           img.eq(1).css("display", "");
        });
      },
      function () {
        var img = $(this).find('img');
        img.eq(1).fadeOut(175, function () {
          img.eq(1).css("display", "none");
        });
      }
    );
});


Эффект такой же, в ff и других нормально
В IE 6,7 срабатывает только первая ссылка меню

micscr 22.05.2010 15:47

В документе должен быть только один уникальный id.
Используйте классы:
<a href="#" class="menua">

И код:
$("a.menua").hover(

ermax 22.05.2010 18:30

ололо, вот теперь работает...
БОЛЬШОЕ СПАСИБО! ;)


Часовой пояс GMT +3, время: 18:09.