为何Firefox开发者工具中元素切换功能无法正常工作？

你的代码核心问题是只处理了汉堡按钮的样式切换，完全没控制移动端菜单的显示/隐藏状态，另外还要排查几个常见问题：

1. 补全菜单切换逻辑 #

修改代码，同时给移动端菜单切换active类，配合CSS控制显示：

const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
const header = document.querySelector('.header-container')

hamburger.addEventListener('click',() => {
    hamburger.classList.toggle('active');
    // 新增：同步切换菜单的active类
    mobile_menu.classList.toggle('active');
});

2. 配套CSS样式 #

必须添加CSS来控制菜单的显示/隐藏，否则切换类不会有视觉变化：

/* 默认隐藏移动端菜单 */
.header .nav-bar .nav-list .menu {
    display: none;
    /* 可根据需求添加定位、过渡动画等样式 */
}

/* 菜单激活时显示 */
.header .nav-bar .nav-list .menu.active {
    display: block; /* 或用flex/grid，匹配你的布局结构 */
}

/* 可选：汉堡按钮激活时的样式（比如转为叉号） */
.header .nav-bar .nav-list .hamburger.active {
    /* 示例：旋转图标 */
    transform: rotate(90deg);
}

3. 排查Firefox专属问题 #

• 确保DOM加载完成后执行代码：如果script标签放在head中，Firefox可能在DOM未渲染完成时就执行代码，导致找不到元素。解决办法是把代码包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.header .nav-bar .nav-list .hamburger');
    const mobile_menu = document.querySelector('.header .nav-bar .nav-list .menu');
    const header = document.querySelector('.header-container')

    hamburger.addEventListener('click',() => {
        hamburger.classList.toggle('active');
        mobile_menu.classList.toggle('active');
    });
});

• 检查控制台错误：按F12打开Firefox开发者工具，切换到「控制台」标签，查看是否有Cannot read properties of null这类错误——这说明选择器未匹配到对应元素，需要核对HTML结构和类名是否完全一致。

内容的提问来源于stack exchange，提问作者T.gifted