Проблема с jquery в IE7

Question

У меня есть меню HTML.Вот код:

<ul>
    <li>
        <a href="">
            About
        </a>
    </li>
</ul>

<ul>
    <li>
        <a href="">
            Hats
        </a>
    </li>

    <ul style="display:none">
        <li>
            <a href="">
                Big
            </a>
        </li>
        <li>
            <a href="">
                Small
            </a>
        </li>

    </ul>

</ul>

<ul>
    <li>
        <a href="">
            Summer clothes
        </a>
    </li>

А вот код JQuery, который показывает подменю при наведении курсора мыши

$('.MenuItems ul li').hover(
    function () 
    {
        /*alert($(this).parent().children('ul').text());*/

        if($(this).parent().children('ul').children().size()>0)
        {
             $(this).parent().children('ul').show();

             $(this).parent().children('ul').hover(
                           function(){ $(this).show(); },
                           function(){ $(this).hide(); }
                           ); 
        }
    }, 

  function () 
  {
       $(this).parent().children('ul').hide();

  });

Это нормально работает во всех браузерах, кроме ie7.$ (this) .parent (). children ('ul') возвращает 0 детей в ie7 и 2 childrent в любом другом браузере.Какой обходной путь?

Answer 1

Почему бы вам просто не вложить первый уровень в один ul и подменю внутри относительного li ..

<div class="MenuItems">
    <ul>
        <li><a href="">About</a></li>
        <li><a href="">Hats</a>
            <ul style="display:none">
                <li><a href="">Big</a></li>
                <li><a href="">Small</a></li>
            </ul>
        </li>
        <li><a href="">Summer clothes</a></li>
    </ul>
</div>

Ваш javascript для этого html должен быть

$('.MenuItems ul li').hover(
    function() {
        var $submenu = $(this).children('ul');
        if ( $submenu.children('li').size() > 0) {
            $submenu.show();
        }
    },
    function() {
        var $submenu = $(this).children('ul');
        $submenu.hide();

    }
);

// submenus handling moved outside of the menu handling to avoid repeated bounding of event
$('.MenuItems li > ul').hover(
    function() {
        $(this).show();
    }, function() {
        $(this).hide();
    }
);

Вам также следует избегать связывания событий внутри других событий, потому что это приводит к (, если не тщательно контролируется ) повторной обработке событий.

Ваш код, например, будет привязывать метод к событию при наведении курсора каждый раз, когда выполняется подменю ul. Если вы наводите / отменяете несколько раз, это связывает событие много раз и приводит к повторному вызову функции ( ухудшает производительность и повторяет код, который, скорее всего, должен быть запущен один раз при наведении .. )

пример на http://jsfiddle.net/gaby/4N2Gj/1/

Answer 2

Почему вы не используете .siblings()?

$(this).siblings('ul').hide();

Другая рекомендуемая очистка кода:

function() {
    var $this = $(this),
        $sibs = $this.siblings('ul');
    if ($sibs.children().length) {
        $sibs.show();
        $sibs.hover(
           function() {
            $(this).show();
        }, function() {
            $(this).hide();
        });
    }
},

function() {
    $(this).siblings('ul').hide();
});