CSS+JavaScript实现Toggle Menu问题：点击汉堡图标后无法关闭导航栏

开发者阿泽

2026-7-17

问题根源

你的代码核心问题出在JavaScript逻辑上：点击图标时，你把Font Awesome用来显示汉堡图标的fa-bars类给移除了，导致元素失去图标样式直接消失；同时，因为事件绑定在.fa-bars元素上，移除类后后续点击无法触发事件，导航栏也就关不了。

修复方案

1. 修改JavaScript代码

不要直接移除fa-bars类，而是切换汉堡图标(fa-bars)和关闭图标(fa-times)的类，这样既能切换图标样式，又能保证元素始终存在可点击：

let menuIcon = document.querySelector('#menu-icon'); // 用ID选择器更稳定
let menu = document.querySelector('.navbar');

menuIcon.addEventListener('click', () => {
    // 切换汉堡/关闭图标类
    menuIcon.classList.toggle('fa-bars');
    menuIcon.classList.toggle('fa-times');
    // 切换导航栏显示状态
    menu.classList.toggle('open');
});

2. 调整CSS（可选优化）

给图标添加上手型光标，提升交互体验，其他原有CSS保持不变：

header #menu-icon {
    display: block;
    cursor: pointer; /* 提示用户可点击 */
}

header .navbar{
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #eee;
    border-top: .1rem solid rgba(0, 0, 0, .1);
    display: none;
}
header .navbar a{
    padding: 1.5rem;
    margin: 1.5rem;
    background-color: #fff;
    border-top: .1rem solid rgba(0, 0, 0, .1);
    display: block;
    border-radius: .5rem;
}

header .navbar.open{
    display: block;
}