菜单隐藏动画未作用于所有子元素问题求助

看起来你遇到的核心问题有两个：

• 菜单展开/收起的动画没有作用到菜单项内容，导致菜单关闭时内容依然可见，仿佛脱离了菜单容器
• 菜单状态切换后，菜单项的布局表现不符合预期

问题根源 #

1. 菜单容器未设置溢出隐藏：你的.menu初始宽度为0，但没有添加overflow: hidden属性，导致菜单项内容会溢出到菜单容器外部，看起来像是直接属于父容器.container
2. 初始padding干扰动画与布局：.menu默认设置了padding: 0 5px，在宽度为0的情况下，padding依然会占据水平空间，不仅破坏动画效果，还会导致菜单关闭时仍有缝隙
3. （小问题）JS里存在笔误：document.getElementById("tobBar")的id拼写错误，应该是"topBar"；另外原代码未显式获取ico元素，可能导致运行报错

修正后的代码 #

调整CSS部分

/* * * MENU * * */
.menu {
 height: 500px;
 transition: 0.5s linear;
 width: 0;
 z-index: 999;
 display: flex;
 flex-direction: column;
 padding: 0; /* 初始去掉padding，避免干扰宽度动画 */
 overflow: hidden; /* 添加溢出隐藏，确保内容随菜单宽度变化隐藏/显示 */
}
.active-menu {
 width: 90%;
 background: #00b0ff;
 z-index: 999;
 border-bottom-left-radius: inherit;
 padding: 0 5px; /* 激活状态再添加padding */
}

修正JS代码

// 修正id拼写错误，并显式获取ico元素
let topBar = document.getElementById("topBar");
let menu = document.getElementById("menu");
let ico = document.getElementById("ico");

ico.addEventListener('click', (e) => {
  ico.classList.toggle("toggle-color");
  menu.classList.toggle("active-menu");
})

为什么这样修改有效？ #

• overflow: hidden会让菜单容器内部的内容在容器宽度为0时被完全隐藏，不会溢出到外部，菜单项会跟着菜单的宽度变化一起参与平滑动画
• 将padding移到.active-menu中，避免初始状态下padding占据空间，确保菜单宽度从0平滑过渡到90%
• 修正JS的id拼写和元素获取问题，避免潜在的运行错误

现在你可以测试一下，菜单展开/收起时，菜单项会跟着容器一起平滑动画，关闭后也不会再出现内容溢出的情况了。

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