JS点击事件监听器仅页面刷新后生效一次，移动端导航菜单功能异常

问题根因 #

• 核心问题是你用了show、hidden两个独立类做切换逻辑，两者状态会叠加冲突：第一次点击汉堡按钮给navUL新增show类，菜单正常展开；点击关闭按钮时给navUL新增hidden类，菜单收起，但此时show类并没有被移除。后续点击汉堡只会切换show类的存在状态，两个类叠加后的状态和你的CSS预期逻辑不匹配，自然无法正常触发交互。
• 少数场景下如果你的ionicons图标是框架动态渲染插入DOM的，JS执行时元素还没加载完成，也可能出现绑定失效，你刷新后首次能触发，基本可以判定是第一种类状态冲突的问题。

修复方案 #

方案1：单类控制（最推荐，逻辑最简单） #

不需要两个类，仅用一个show类控制显示隐藏即可，打开和关闭都直接操作这个类：

/*Menu responsive code*/
const hamburger = document.getElementById('menuIcon');
const closeMenu = document.getElementById('closeNav');
const navUL = document.getElementById('navUL');

hamburger.addEventListener('click', () =>{
    navUL.classList.add('show');
});

closeMenu.addEventListener('click', () =>{
    navUL.classList.remove('show');
})

CSS只要默认给navUL设为隐藏状态（translateX偏移到屏幕外），存在show类时设为translateX(0)显示即可，不需要额外写hidden类的样式。

方案2：双类切换时同步清理冲突类 #

如果你必须保留两个类的写法，每次切换时主动移除另一个冲突类即可：

hamburger.addEventListener('click', () =>{
    navUL.classList.remove('hidden');
    navUL.classList.toggle('show');
});

closeMenu.addEventListener('click', () =>{
    navUL.classList.remove('show');
    navUL.classList.toggle('hidden');
})

额外兼容处理 #

如果是动态DOM加载导致的绑定失效，可以把所有菜单逻辑放到DOMContentLoaded事件中执行，确保绑定元素已经存在：

document.addEventListener('DOMContentLoaded', () => {
  // 所有菜单相关JS代码放到此处
})

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