点击汉堡按钮时隐藏的Navbar子菜单无法展开问题求助

核心问题与修复步骤 #

1. JavaScript代码错误修正 #

你的JS代码里存在明显的方法调用错误，classList对象没有menuButton这个方法，这是导致功能失效的直接原因。另外，汉堡按钮内的<a>标签会触发默认页面跳转行为，也会打断菜单展开逻辑。

修正后的JS代码：

const menuButton = document.getElementById('menu-button');
const insideMenu = document.getElementById('inside-menu');

menuButton.addEventListener('click', (e) => {
  // 阻止a标签的默认跳转行为
  e.preventDefault();
  // 切换active类，实现菜单显示/隐藏的切换效果
  insideMenu.classList.toggle('active');
});

2. HTML结构优化（可选但推荐） #

汉堡按钮用<button>标签替代<a>更符合语义化，同时避免默认跳转的潜在问题：

<div class="nav-bar">
    <div class="menu" id="menu-button">
        <button class="Menu">
            <img src="menu.png" alt="menu">
        </button>
        <ul id="inside-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</div>

3. 补充必要的CSS样式 #

确保默认状态下菜单隐藏，添加active类后显示，同时适配响应式场景：

/* 默认隐藏移动端菜单 */
#inside-menu {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    margin-top: 8px;
}

/* 添加active类后显示菜单 */
#inside-menu.active {
    display: flex;
}

/* 大屏设备下默认显示菜单，隐藏汉堡按钮 */
@media (min-width: 768px) {
    #inside-menu {
        display: flex;
        flex-direction: row;
        gap: 24px;
        padding: 0;
        margin-top: 0;
    }
    #menu-button .Menu {
        display: none;
    }
}

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