如何显示只有第一个通过jQuery悬停

How to show only the first by hover with jQuery?

本文关键字：第一个 jQuery 悬停 何显示 显示      更新时间：2023-09-26

如果我把鼠标悬停在我的菜单链接上，目前所有在第一层的子菜单都会显示出来我不知道哪里不对，看看我的代码:

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

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

我需要一些帮助。

为了更好的理解，我在这里创建了一个fiddle

你的选择器在你的悬停函数是找到所有的ul元素是li元素的后代。你只想显示直系子女。试试这个:

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

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

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

如果你只是想改变你的代码，你可能想试试这个改变:

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

您需要指定要显示的列表。使用$(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()方法的文档

相关文章：