使用jQuery实现鼠标悬停显示菜单子元素的技术求助

嘿，作为jQuery新手刚接触这种交互需求很正常，我来帮你一步步搞定这个功能！

首先，先确认你的子菜单初始隐藏的CSS已经设置到位（你说已完成，但我还是把这部分明确写出来，确保没有遗漏）：

.submenu {
    display: none; /* 初始隐藏子菜单 */
    list-style: none;
    padding: 0;
    margin: 0;
}

接下来是核心的jQuery实现，不过要先提醒你：一定要先引入jQuery库，可以在页面的<head>标签里或者</body>闭合前添加（作业里用CDN链接最方便）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

然后写我们的交互逻辑代码：

$(document).ready(function() {
    // 只给包含子菜单的菜单项绑定事件
    $('.menu li:has(.submenu)')
        .mouseenter(function() {
            // 鼠标进入时，显示当前菜单项下的子菜单
            $(this).find('.submenu').show();
        })
        .mouseleave(function() {
            // 鼠标离开时，隐藏子菜单
            $(this).find('.submenu').hide();
        });
});

代码小解释（帮你理解每一步）： #

• $(document).ready(function() { ... })：这是jQuery的基础操作，确保页面所有DOM元素加载完成后再执行代码，避免出现找不到元素的报错，新手一定要记得加！
• $('.menu li:has(.submenu)')：精准选中那些包含.submenu的菜单项，这样就不会影响Home、Page1这类没有子菜单的选项，完美符合你的需求。
• .mouseenter()和.mouseleave()：分别绑定鼠标进入和离开的事件，用$(this).find('.submenu')定位到当前菜单项下的子菜单，再用.show()和.hide()控制显示隐藏。

完整整合后的代码示例 #

把所有内容整合到一起，你可以直接用这个完整代码测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侧边栏导航菜单</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        nav { 
            float: left; 
            width: 200px; 
            position: fixed; 
            top: 80px; 
            left: 10px; 
            border-top: 1px solid #9AA2B2; 
            border-right: 1px solid #9AA2B2; 
            border-left: 1px solid #9AA2B2; 
        } 
        .menu, .submenu { 
            list-style: none; 
            padding: 0; 
            margin: 0; 
        } 
        .menu a { 
            display: block; 
            padding: 10px 15px; 
            background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
            border-top: 1px solid #9AA2B2; 
            border-bottom: 1px solid #2E323A; 
            text-decoration: none; 
            color: white; 
        } 
        .menu a:hover { 
            background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
        } 
        .submenu a { 
            padding: 10px 25px; 
            background: linear-gradient(to bottom, #5a5b5a 0%,#4c535e 100%);
        }
        .submenu {
            display: none; /* 初始隐藏子菜单 */
        }
    </style>
</head>
<body>
    <nav> 
        <ul class="menu"> 
            <li><a href="">Home</a></li> 
            <li><a href="">Page 1</a></li> 
            <li><a href="">Page 2</a> 
                <ul class="submenu"> 
                    <li><a href="">Subpage 2a</a></li> 
                    <li><a href="">Subpage 2b</a></li> 
                    <li><a href="">Subpage 2c</a></li> 
                </ul> 
            </li> 
            <li><a href="">Page 3</a></li> 
        </ul> 
    </nav>

    <script>
        $(document).ready(function() {
            $('.menu li:has(.submenu)').mouseenter(function() {
                $(this).find('.submenu').show();
            }).mouseleave(function() {
                $(this).find('.submenu').hide();
            });
        });
    </script>
</body>
</html>

这样就能完美实现你要的效果：鼠标悬停在带子菜单的选项上时显示子菜单，悬停在无子菜单的选项上无操作，鼠标离开后子菜单自动隐藏。

内容的提问来源于stack exchange，提问作者Laura_Laurent