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

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

您还应该避免从其他事件中绑定事件，因为在重复的事件处理中会产生（除非密切监视）。

例如，每次子菜单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();
});

IE7中的jquery问题

2 个答案: