Javascript CSS汉堡包菜单关闭时一分为二

我已经成功地编写了一个CSS/JS汉堡包菜单，它在单击时有一个转换图标。然而，我刚刚发现了一个bug，当点击汉堡包“关闭”按钮时，导航菜单在标题后面剪切，使其看起来很混乱

目前，当点击汉堡时，菜单会正确打开（100vh），但当它关闭时，它似乎会切到标题后面，所以看起来它的速度大约是80vh。当它关闭时，我希望它保持在100vh

为冗长的代码提前道歉

这是我的密码：

//变量
让line1=document.getElementById（“hamburger-line-1”）；
让line2=document.getElementById（“hamburger-line-2”）；
让hamburger=document.getElementById（“hamburger”）；
让navList=document.getElementById（“汉堡导航列表”）；
//作用
函数hamburgerActive（）{
line1.classList.toggle（“活动”）；
line2.classList.toggle（“活动”）；
navList.classList.toggle（“活动”）；
}
//事件侦听器
hamburger.addEventListener（“单击”，hamburgerActive）
.universal标题部分{
高度：自动；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.通用割台容器{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：20px自动；
}
.万能汉堡{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
#汉堡包{
高度：20px；
宽度：40px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弯曲方向：立柱；
光标：指针；
z指数：99；
}
.汉堡包{
高度：5px；
宽度：30px；
背景色：#342b38；
转换：所有.2易入易出；
光标：指针；
}
#汉堡包-line-1.active{
变换：translateY（7.5px）旋转（-45度）；
}
#汉堡包-line-2.active{
变换：translateY（-7.5px）旋转（45度）
}
.通用标题标志{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.通用收割台篮{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
}
#汉堡导航表{
高度：100vh；
宽度：0；
排名：0；
显示器：flex；
对齐项目：居中；
证明内容：周围的空间；
弯曲方向：立柱；
背景颜色：黄色；
过渡：所有0.5s缓进缓出；
}
#汉堡-nav-list.active{
高度：100vh；
宽度：30%；
位置：固定；
}
你认为这是最简单的编辑方法吗

更改位置：绝对/柔性

DOM元素的顺序也发生了变化（最重要的是）

希望它没有损坏任何东西：）


//变量
让line1=document.getElementById（“hamburger-line-1”）；
让line2=document.getElementById（“hamburger-line-2”）；
让hamburger=document.getElementById（“hamburger”）；
让navList=document.getElementById（“汉堡导航列表”）；
//作用
函数hamburgerActive（）{
line1.classList.toggle（“活动”）；
line2.classList.toggle（“活动”）；
navList.classList.toggle（“活动”）；
}
//事件侦听器
hamburger.addEventListener（“单击”，hamburgerActive）
.universal标题部分{
高度：自动；
宽度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.通用割台容器{
身高：90%；
宽度：90%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
保证金：20px自动；
}
.万能汉堡{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
调整内容：灵活启动；
}
#汉堡包{
高度：20px；
宽度：40px；
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
弯曲方向：立柱；
光标：指针；
z指数：9999；
}
.汉堡包{
高度：5px；
宽度：30px；
背景色：#342b38；
转换：所有.2易入易出；
光标：指针；
}
#汉堡包-line-1.active{
变换：translateY（7.5px）旋转（-45度）；
}
#汉堡包-line-2.active{
变换：translateY（-7.5px）旋转（45度）
}
.通用标题标志{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.通用收割台篮{
身高：100%；
宽度：33.33%；
显示器：flex；
对齐项目：居中；
证明内容：柔性端；
}
#汉堡导航表{
高度：100vh；
宽度：0；
排名：0；
对齐项目：居中；
证明内容：周围的空间；
弯曲方向：立柱；
背景颜色：黄色；
过渡：所有0.5s缓进缓出；
位置：绝对位置；
}
#汉堡-nav-list.active{
高度：100vh；
宽度：30%；
位置：固定；
z指数：；
显示器：flex；
}