Javascript 如何使用jQuery悬停仅显示第一个？

如果我将鼠标悬停在我的菜单上，当前将显示第一级的所有子菜单 我不知道出了什么问题，请参阅我的代码：

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

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

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

需要帮忙吗

---

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

悬停函数中的选择器正在查找

ul

元素的后代。您只想显示直接的孩子。请尝试以下方法：

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

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

---

保存子菜单的

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

您应该为不同级别的菜单使用不同的类来分隔不同级别的子菜单的

ul

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

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

---

您需要指定要显示的列表。使用

$（this）

作为上下文查找内部的

，然后使用

：first

伪选择器过滤结果

对于

hoverIn

和

hoverOut

事件，请尝试以下操作：

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

$（“#菜单”）。在（'hover'，'li'，函数（e）上{
//$（这）指的是悬停的

$（this）.find（'ul:first'）.slideToggle（100）；
});

请参阅文档以了解详细信息和方法