Problem with jquery in IE7

Question

i have a HTML menu. Here is code:

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

And here is JQuery code which shows sub menu when mouse is hover

$('.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();

  });

It's work ok in all browser except ie7. $(this).parent().children('ul') return 0 children in ie7 and 2 childrent in any other browser. What is the workaround?

Answer 1

Why don't you just nest the first level in a single ul and the submenus inside the relative 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>

you javascript for this html should be

$('.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();
    }
);

You should also avoid binding events from inside other events, because that results (unless closely monitored) in repeated event handling.

Your code for example will bind method to the hover event each time the submenu ul is hovered. If you hover/unhover multiple time it will bind the event many times and will result in repeated function getting called (degrades performance and repeats code that most likely is to be run once on hover..)

example at http://jsfiddle.net/gaby/4N2Gj/1/

Answer 2

Why aren't you using .siblings()?

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

Other recommended code cleanup:

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();
});