移动端下拉菜单重叠其他菜单 如何实现展开时向下推动下方菜单

问题根源 #

你的移动端下拉菜单重叠是因为下拉容器设置了position: absolute，脱离了正常文档流，展开时不会占用父级高度，所以无法推动下方菜单项下移。同时JS代码重复给导航容器绑定点击事件，后面的绑定会覆盖前面的，也会导致逻辑异常。

修改方案 #

1. CSS部分调整

替换原有下拉菜单相关的样式，区分桌面端和移动端的定位逻辑：

/* 保留桌面端悬浮下拉效果 */
@media (min-width: 701px) {
  .NewSub-menu-1,
  .NewSub-menu-2 {
      display: block;
      position: absolute;
  }
  .NewSub-menu-1 ul,
  .NewSub-menu-2 ul {
      display: block;
      position: absolute;
      transition: 2s;
  }
}

/* 移动端下拉用正常文档流定位，实现推开下方内容的效果 */
@media (max-width: 700px) {
  .NewSub-menu-1,
  .NewSub-menu-2 {
      display: block;
      position: static;
      margin-top: 10px;
      margin-left: 15px;
  }
  /* 移除之前设置的负margin避免布局错位 */
  .nav-Links ul li .Sub-menu-1 ul {
      margin-top: 0;
  }
}

/* 替换原有箭头旋转样式，只作用于当前点击的菜单 */
.fas.fa-chevron-left.rotate {
    display: inline-block;
    padding-left: 5px;
    transform: rotate(-90deg);
    transition:1s;
}

删除原来的以下两段冗余样式：

/* 删掉这段 */
.NewSub-menu-1,
.NewSub-menu-2 {
    display: block;
    position: absolute;
}
    .NewSub-menu-1 ul,
    .NewSub-menu-2 ul {
        display: block;
        position: absolute;
        transition: 2s;
    }

/* 删掉这段 */
.nav-Links.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');
let click2 = document.querySelector('.click2');
let list2 = document.querySelector('.Sub-menu-2');

click.addEventListener("click", (e) => {
    e.stopPropagation();
    list.classList.toggle('NewSub-menu-1');
    click.querySelector('.fas.fa-chevron-left').classList.toggle('rotate');
});

click2.addEventListener("click", (e) => {
    e.stopPropagation();
    list2.classList.toggle('NewSub-menu-2');
    click2.querySelector('.fas.fa-chevron-left').classList.toggle('rotate');
});

最终效果 #

修改后桌面端下拉菜单保持原有的悬浮效果，移动端点击下拉菜单时，子菜单会在正常文档流中展开，自动把下方的菜单项向下推动，不会出现重叠问题。

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