如何通过使用jQuery悬停显示第一个？

Question

如果我在我的menulinks上悬停,目前所有在第一级的子目标都将显示我不知道什么是错的,请参阅我的代码:

    $('#menu li').hover(function () {
        //show its submenu
        $('ul', this).slideDown(100);

    }, function () {
        //hide its submenu
        $('ul', this).slideUp(100);
    });

所以在我看来它必须工作得很好,因为悬停在链接上应该只显示第一个子菜单.但是这个第一个链接的子菜单也将直接通过悬停显示,我不知道如何更好地修复它.

需要一些帮助.

为了更好地理解我在这里创造了一个小提琴.

Answer 1

悬停函数中的选择器正在查找作为ul元素后代的所有li元素.你想只展示直接的孩子.试试这个:

$('#menu li').hover(function() {
    //show its submenu
    $(this).children('ul').slideDown(100);

}, function() {
    //hide its submenu
    $(this).children('ul').slideUp(100);
});