移动端子菜单展开未下推其余内容导致重叠问题求助

问题解决方法 #

核心原因 #

你的子菜单默认使用了position: absolute脱离了正常文档流，展开时不会占用父容器的高度，因此无法挤压下方内容下移，出现重叠问题。

具体修改步骤 #

1. 调整CSS样式

直接用你现有JS逻辑生成的expand类做样式控制即可，添加/修改以下CSS规则：

/* 子菜单默认样式，替换原来的absolute定位相关规则 */
.secondLayer ul {
  position: static;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* 可选，添加展开动画 */
  margin: 0;
  padding: 0;
}

/* 父菜单展开时的子菜单样式 */
.secondLayer.expand ul {
  max-height: 800px; /* 取值只要大于你最长子菜单的实际高度即可 */
}

/* 确保一级菜单项高度自适应，不要设置固定高度 */
.secondLayer {
  height: auto;
}

/* 确认移动端菜单整体容器不要限制高度 */
.mobilenavigation {
  height: auto;
  overflow: visible;
}

2. 额外检查项

如果修改后还是有重叠，排查以下两个规则：

• 子菜单的任意父级容器不要设置overflow: hidden，避免展开的子菜单被截断
• 不要给.mobilenavigation设置固定高度，确保容器高度可以随内容自动撑开

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