如何实现Flex容器点击项后在其下方展示嵌套子项的布局

问题背景 #

• 现有设置了flex-direction: row的flex横向导航容器，内部排列多个顶层菜单项，初始渲染效果如下：
  
• 交互需求：点击任意顶层项时，在该项正下方展示对应次级子项，点击「Top Level Item 1」的预期效果如下：
  
• 方案约束：
  • 不采用上下叠放两个独立容器（分别承载顶层项、次级项）的实现：该方案在顶层新增项、插入非菜单类元素时会出现对齐异常，维护成本高
  • 必须保留次级子项直接嵌套在对应顶层项DOM节点内的结构，默认文档流下该写法会撑开顶层导航容器边框，异常效果如下：
    
  • 需适配固定高度、内部项垂直居中的带边框导航场景：直接给下拉子项加position: absolute会出现错位，异常效果如下：
    
• 预期DOM结构参考：

<div class="nav-container">
  <div class="top-item">
    <div class="top-title">Top Level Item 1</div>
    <div class="sub-menu">
      <div>bottom Level Item 1</div>
      <div>bottom Level Item 2</div>
    </div>
  </div>
  <!-- 其余顶层项结构一致 -->
</div>

实现方案 #

核心是通过绑定到顶层项的相对定位锚点解决绝对定位错位问题，不需要调整嵌套DOM结构，步骤如下：

• 给每个直接包裹「顶层标题+次级菜单」的.top-item节点设置position: relative，作为下拉子项的定位基准——之前绝对定位错位的核心原因，就是锚点错误绑定到了外层导航容器，而非当前点击的顶层项
• 给顶层标题节点.top-title设置和导航栏高度一致的行高、左右内边距，配合外层导航容器的align-items: center实现垂直居中；不要给.top-item本身设置固定高度，避免锚点位置偏移
• 给次级菜单容器.sub-menu设置position: absolute，属性值固定为top: 100%、left: 0，这样子菜单会永远贴合在当前顶层项的底部边缘，不会撑开父容器高度，也不受导航栏固定高度影响
• 次级菜单默认设置display: none，点击对应顶层项时给当前项添加激活类，将内部子菜单切换为display: block即可

关键样式参考 #

/* 外层flex导航容器 */
.nav-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 60px; /* 可根据需求修改为任意固定导航高度 */
  border: 1px solid #ccc;
}
/* 顶层菜单项：下拉菜单的定位锚点 */
.top-item {
  position: relative;
  cursor: pointer;
}
/* 顶层菜单标题：负责实现垂直居中 */
.top-title {
  padding: 0 16px;
  line-height: 60px; /* 与导航容器高度保持一致 */
}
/* 次级下拉菜单 */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%; /* 始终贴在当前顶层项的底部 */
  left: 0;
  min-width: 120px;
  border: 1px solid #eee;
  background: #fff;
  z-index: 99; /* 保证下拉层不被其他元素遮挡 */
}
/* 激活状态展示下拉菜单 */
.top-item.active .sub-menu {
  display: block;
}
/* 次级菜单项基础样式 */
.sub-menu div {
  padding: 8px 16px;
  line-height: 1.5;
}

注意事项 #

• 不要给外层导航容器设置overflow: hidden，否则下拉子项会被容器裁切
• 后续新增顶层项、插入其他非菜单元素时，只要元素放在.nav-container容器内，下拉锚点会自动跟随对应顶层项的位置，不会出现对齐偏移问题

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