jquery - IE7中jquery的问题

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') 在 ie7 中返回 0 个子级，在任何其他浏览器中返回 2 个子级。解决方法是什么？

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>

这个 html 的 JavaScript 应该是

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

您还应该避免从其他事件内部绑定(bind)事件，因为这会导致重复的事件处理(除非密切监视)。

例如，每次子菜单 ul 悬停时，您的代码都会将方法绑定(bind)到悬停事件。如果您多次悬停/取消悬停，它将多次绑定(bind)事件，并导致重复调用函数(降低性能并重复最有可能在悬停时运行一次的代码..) p>

示例位于 http://jsfiddle.net/gaby/4N2Gj/1/