Javascript 在菜单上隐藏动画不'；它不适用于所有的孩子

正如您在下面的代码片段中所看到的，当我单击菜单图标时，显示/隐藏动画已正确完成，但这不会应用于项目的内容

此外，当类“active menu”附加到菜单时，“item”类会正确应用display:grid属性，但一旦它关闭，项的内容就会表现为不再被视为菜单的直接子项，而是容器的直接子项，这是错误的

我不能清楚地说出问题出在哪里，所以我需要你的建议（我希望我的解释是清楚的）

让topBar=document.getElementById（“tobBar”）；
让menu=document.getElementById（“menu”）；
ico.addEventListener（'单击'，（e）=>{
ico.classList.toggle（“切换颜色”）；
menu.classList.toggle（“活动菜单”）；
})

正文{
背景色：#eee；
}
.集装箱{
宽度：370px；
高度：550px；
背景：暗射线；
z指数：-2；
保证金：0自动；
边界半径：20px；
}
/***顶栏***/
.顶栏{
高度：50px；
宽度：100%；
背景：#00b0ff；
显示器：flex；
对齐项目：居中；
z指数：999；
边框左上半径：继承；
边框右上半径：继承；
}
.顶栏图标{
宽度：50px；
文本对齐：居中；
光标：指针；
z指数：999；
}
.切换颜色{
颜色：白色；
}
/*  *   *   *   *   */
/***菜单***/
.菜单{
高度：500px；
过渡：0.5s线性；
宽度：0；
z指数：999；
显示器：flex；
弯曲方向：立柱；
填充：0 5px；
}
.活动菜单{
宽度：90%；
背景：#00b0ff；
z指数：999；
边框左下半径：继承；
}
.活动菜单>*{
背景色：白色；
}
/*  *   *   *   *   */
/***菜单项***/
.menu>.item{
高度：50px；
}
.项目：非（：第一个孩子）{
边缘顶部：10px；
}
.项目{
显示：网格；
网格模板列：50px 1fr；
网格间距：5px；
}
/****/

单击图标

菜单项
拉拉拉拉
2.
3.
4.
5.
6.

您需要将

溢出：隐藏
设置为
.menu
。见下文：


让topBar=document.getElementById（“tobBar”）；
让menu=document.getElementById（“menu”）；
ico.addEventListener（'单击'，（e）=>{
ico.classList.toggle（“切换颜色”）；
menu.classList.toggle（“活动菜单”）；
})
正文{
背景色：#eee；
}
.集装箱{
宽度：370px；
高度：550px；
背景：暗射线；
z指数：-2；
保证金：0自动；
边界半径：20px；
}
/***顶栏***/
.顶栏{
高度：50px；
宽度：100%；
背景：#00b0ff；
显示器：flex；
对齐项目：居中；
z指数：999；
边框左上半径：继承；
边框右上半径：继承；
}
.顶栏图标{
宽度：50px；
文本对齐：居中；
光标：指针；
z指数：999；
}
.切换颜色{
颜色：白色；
}
/*  *   *   *   *   */
/***菜单***/
.菜单{
高度：500px；
过渡：0.5s线性；
宽度：0；
z指数：999；
显示器：flex；
弯曲方向：立柱；
溢出x：隐藏；
}
.活动菜单{
宽度：90%；
填充：0 5px；
背景：#00b0ff；
z指数：999；
边框左下半径：继承；
}
.活动菜单>*{
背景色：白色；
}
/*  *   *   *   *   */
/***菜单项***/
.menu>.item{
高度：50px；
}
.项目：非（：第一个孩子）{
边缘顶部：10px；
}
.项目{
显示：网格；
网格模板列：50px 1fr；
网格间距：5px；
}
/****/

单击图标

菜单项
拉拉拉拉
2.
3.
4.
5.
6.