使用jQuery开发带子导航的导航栏遇到三类问题求助

Hey，我看了你用jQuery开发导航栏遇到的三个痛点，咱们逐个拆解搞定：

1. 子导航无法随主导航缩放 #

问题根源：你原来的.nav li没有设置宽度，当主导航的a标签hover缩放时，父li的宽度没同步变化，导致子导航.subNav的width:100%是基于li的原始宽度，而非缩放后的a标签宽度。

修复方案：

• 给.nav li设置初始宽度，和a标签默认宽度匹配；
• 给.nav li加上position:relative，作为子导航的定位参考；
• 将.subNav设置为绝对定位，让它的宽度直接继承父li的宽度，这样就能跟着主导航一起缩放。

2. 子导航悬停时快速消失 #

问题根源：你之前把hover事件绑定在了.on这个a标签上，当鼠标从a标签移到子导航区域时，就离开了a标签的触发范围，触发mouseout事件导致子导航收起。

修复方案：

• 将hover事件绑定在父元素.nav li上，这样只要鼠标在li的范围内（包括子导航），hover状态就会保持，子导航不会消失。

3. 子导航hover CSS样式优化 #

你原来的CSS已经写了hover样式，但可以调整选择器权重和样式细节，确保效果更明显且优先级足够。比如给.subNav li a:hover增加更明确的选择器，或者调整背景色对比度，和主导航视觉保持统一。

修改后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航栏示例</title>
</head>
<body>
<ul class="nav">
    <li>
        <a class="on a-first" href="#">首 页</a>
        <ul class="subNav">
            <li><a href="#">二级菜单1</a></li>
            <li><a href="#">二级菜单2</a></li>
        </ul>
    </li>
    <li><a class="a-first" href="#">关于我们</a></li>
    <li><a class="a-first" href="#">产品展示</a></li>
    <li><a class="a-first" href="#">售后服务</a></li>
    <li><a class="a-first" href="#">联系我们</a></li>
</ul>
</body>
</html>

CSS部分

* {
    margin: 0;
    padding: 0;
    font-size: 14px;
}
.nav {
    list-style: none;
    height: 30px;
    border-bottom: 10px solid #F60;
    margin-top: 20px;
    padding-left: 50px;
    overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}
.nav li {
    float: left;
    width: 80px; /* 设置初始宽度，和a标签默认宽度一致 */
    position: relative; /* 作为子导航的定位参考 */
    margin-left: 1px;
}
.nav li a {
    color: #333;
    text-decoration: none;
    display: block;
    height: 30px;
    text-align: center;
    line-height: 30px;
    width: 100%; /* 改为100%，继承父li的宽度 */
    background: #efefef;
}
.nav li a.on, .nav li a:hover {
    background: #F60;
    color: #fff;
}
.subNav {
    position: absolute; /* 绝对定位，基于父li */
    top: 30px; /* 紧贴主导航下方 */
    left: 0;
    width: 100%; /* 继承父li的宽度，随主导航缩放 */
    height: 0;
    overflow: hidden;
    background: #ddd; /* 增加背景色，让子导航更清晰 */
}
.subNav li {
    clear: both;
    width: 100%; /* 子li宽度100% */
    margin-left: 0; /* 去掉默认margin */
}
.subNav li a {
    background: #ddd;
}
.subNav li a:hover {
    background: #F60; /* 和主导航hover颜色统一，视觉更协调 */
    color: #fff;
}

JS部分

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
    // 主导航a标签的缩放效果
    $('.nav li a').hover(
        function () {
            $(this).stop().animate({"width":"160px"},200);
            // 同步调整父li宽度，让子导航跟着缩放
            $(this).parent('li').stop().animate({"width":"160px"},200);
        },
        function () {
            // 非当前激活的导航才恢复宽度
            if(!$(this).hasClass('on')){
                $(this).stop().animate({"width":"80px"},200);
                $(this).parent('li').stop().animate({"width":"80px"},200);
            }
        }
    );

    // 子导航的显示/隐藏，绑定在父li上
    $('.nav li').hover(
        function () {
            // 只对包含subNav的li生效
            if($(this).find('.subNav').length > 0){
                $(this).find('.subNav').stop().animate({"height":"190px"},300);
            }
        },
        function () {
            if($(this).find('.subNav').length > 0){
                $(this).find('.subNav').stop().animate({"height":"0"},300);
            }
        }
    );
});
</script>

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