本文详细讲解如何修复因 Ja vaScript 函数名冲突导致页面空白或白屏的问题。通过重命名 open() 函数、正确获取 DOM 元素并切换 display 样式，即可实现移动端友好的响应式导航栏汉堡菜单（☰）展开/收起功能，同时支持图标动态切换为关闭按钮（×）。

本文详细说明如何解决因 Ja vaScript 函数命名冲突引起的页面空白问题。通过将 `open()` 函数重命名、正确选取 DOM 元素并切换 `display` 显示状态，可以快速实现一个适配移动端的响应式导航栏汉堡菜单（☰）展开与隐藏效果，并支持自动切换为关闭按钮（×）。

在开发响应式导航栏、移动端菜单或汉堡按钮时，一个常见却容易忽视的问题就是：不要直接把自定义函数命名为 open()。Ja vaScript 中的 window.open() 属于原生全局方法，主要用于打开新窗口。如果你在全局作用域中声明了同名函数，例如 ，浏览器可能会优先调用原生方法，并因参数不正确而产生异常。轻则点击无反应，重则出现页面空白、白屏甚至当前页面被错误刷新，这正是“点击汉堡菜单后整个页面消失”的核心原因。

✅ 正确实现步骤

1. 重命名冲突函数

将 function open() { ... } 修改为更具语义且不会与原生方法冲突的名称，例如 toggleNa v() 或 openit()：

function toggleNa v() {
const menu = document.querySelector('.hidden');
if (menu.style.display === 'block') {
menu.style.display = 'none';
} else {
menu.style.display = 'block';
}
}