JavaScript与CSS中Active类失效，移动端菜单无法弹出且报mobileMenu未定义

1. 修正JavaScript变量名错误 #

你在JS里定义的菜单变量是menu，但点击事件里误用了未声明的mobileMenu，直接替换成menu即可。

修正后的JS代码：

let burger = document.querySelector(".menu_icon");
let menu = document.querySelector(".ul_one");

burger.addEventListener("click", function(){
    menu.classList.toggle("active");
})

2. 修正CSS选择器错误 #

你的CSS里.ul_one .active是选择.ul_one内部带有active类的子元素，但我们需要的是给.ul_one本身添加active类时生效的样式，所以要把空格去掉，改成.ul_one.active。

修正后的CSS代码：

.ul_one{
    position: fixed;
    top: 58px;
    gap: 0;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    width: 100%;
    left: 100%;
    transition: 0.5s;
}
.ul_one.active{
    left: 0;
}
.li{
    margin: 20px 0;
}

完成以上两处修改后，点击汉堡按钮就能正常触发菜单的弹出/收起切换。

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