移动端汉堡图标点击后菜单不显示问题求助

问题核心 #

• 变量menu错误指向了汉堡按钮（.hamburger button），而非目标菜单（.hamburgermenu），所以执行classList.toggle时，类被加到了按钮上，而非菜单。
• CSS逻辑有误：.hamburgermenu默认设置display:none，如果直接移除这个类，会丢失菜单的基础样式（宽高、背景等），应该用额外的类来控制显示状态。

修复步骤 #

1. 修正JS元素选择与事件逻辑 #

重新获取目标菜单元素，点击按钮时切换菜单的显示类：

// 获取汉堡按钮
const hamburgerBtn = document.querySelector(".hamburger button");
// 获取目标菜单
const dropdownMenu = document.querySelector(".hamburgermenu");

hamburgerBtn.addEventListener("click", function() {
  Showdropdown();
});

function Showdropdown() {
  // 切换菜单的active类，控制显示/隐藏
  dropdownMenu.classList.toggle("active");
}

2. 调整CSS样式 #

保留.hamburgermenu的基础样式，新增.active类控制菜单显示：

/* 菜单基础样式 */
.hamburgermenu {
    display: none; /* 默认隐藏 */
    width:10rem;
    height:10rem;
    background-color:rgb(255 255 255);
    margin-top: 15rem;
    border-radius:5rem;
}

/* 激活状态：显示菜单 */
.hamburgermenu.active {
    display: block;
}

@media screen and (max-width: 890px) {
  .hamburger {
        display:block;
    }
    .nav_menu {
        display:none;
    }
    .login_nav {
        display:none;
    }
}

3. HTML结构无需修改 #

保持原有的按钮和菜单结构即可。

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