移动端导航下拉菜单重叠与Font Awesome箭头联动异常问题咨询

问题1：点击任意下拉菜单，两个箭头同时被激活旋转 #

触发原因 #

• JS代码重复绑定了两次navLinks的点击事件，后一次绑定直接覆盖前一次逻辑，只要点击导航区域就会给整个导航容器添加active类
• 原有CSS规则.nav-Links.active .fas.fa-chevron-left会匹配容器内所有的箭头元素，导致两个下拉的箭头同时触发旋转效果

修复步骤 #

1. 替换CSS中原有的箭头旋转规则：

/* 删除原有 .nav-Links.active .fas.fa-chevron-left 规则，替换为以下代码 */
.click.active .fas.fa-chevron-left,
.click2.active .fas.fa-chevron-left {
    transform: rotate(-90deg);
    transition:1s;
}

2. 替换原有JS逻辑，删除重复的导航容器点击绑定：

var navLinks = document.getElementById("navLinks")

function showMenu() {
    navLinks.style.right = "0";
}
function hideMenu() {
    navLinks.style.right = "-200px";
}

// 第一个下拉菜单逻辑
let click = document.querySelector('.click');
let list = document.querySelector('.Sub-menu-1');
click.addEventListener("click", (e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发导航容器其他绑定事件
    list.classList.toggle('NewSub-menu-1');
    click.classList.toggle('active'); // 仅给当前点击的下拉项切换激活状态
});

// 第二个下拉菜单逻辑
let click2 = document.querySelector('.click2');
let list2 = document.querySelector('.Sub-menu-2');
click2.addEventListener("click", (e) => {
    e.stopPropagation();
    list2.classList.toggle('NewSub-menu-2');
    click2.classList.toggle('active');
});

问题2：移动端点击Recruiting下拉菜单与其他菜单重叠 #

触发原因 #

你给下拉菜单的激活状态设置了position: absolute，移动端侧边栏是固定定位布局，绝对定位的元素会脱离正常文档流，展开时不会占用原有文档位置，就会和下方的菜单项重叠。

修复步骤 #

在移动端媒体查询@media(max-width: 700px)中新增下拉菜单的位置规则：

@media(max-width: 700px) {
    /* 原有媒体查询内的其他规则保持不变，新增以下代码 */
    .NewSub-menu-1,
    .NewSub-menu-2 {
        position: static;
    }
    .NewSub-menu-1 ul,
    .NewSub-menu-2 ul {
        position: static;
        margin-left: 15px; /* 可选，给子菜单增加左侧缩进，层级更清晰 */
    }
}

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