Question

如果我悬停在我的手铐上，目前将显示第一级的所有子目标我不知道什么是错的，请看我的代码：

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

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

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

需要一些帮助。

为了更好地理解，我创建了一个fiddle here。

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

Answer 2

持有子菜单的<ul>也包含子子菜单。因此，如果显示第一个列表，它还会自动显示该列表中包含的所有元素。

Answer 3

对于不同级别的菜单，您应该为不同级别的子菜单分隔ul。

如果您只想更改代码，可能需要尝试此更改：

//show its submenu
$('ul', this).eq(0).slideDown(100);

Answer 4

您需要指定要显示的列表。使用$(this)作为上下文查找内部的<ul>，然后使用:first伪选择器过滤结果。

对hoverIn和hoverOut事件尝试类似的事情：

$("#menu").on('hover', 'li', function(e){
    // $(this) refers to the <li> being hovered
    $(this).find('ul:first').slideToggle(100);
});

请参阅on()和slideToggle()方法的文档。

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

4 个答案: