移动端汉堡导航栏（burger）点击后菜单闪烁问题求助

问题原因及修复步骤 #

1. HTML标签语法错误 #

代码中LOGO的<a>标签闭合格式错误，会导致DOM解析异常，引发交互逻辑故障：

<!-- 错误写法 -->
<a href="/" id="navbar__logo">LOGO</a:>

<!-- 正确写法 -->
<a href="/" id="navbar__logo">LOGO</a>

2. CSS过渡属性语法错误 #

所有transition属性的写法不符合规范，你用逗号分隔了时长和缓动函数，正确格式需用空格分隔：

/* 错误写法 */
transition: all 0.3s,ease;

/* 正确写法 */
transition: all 0.3s ease;

需要修改以下几处的过渡代码：

• .button:hover中的transition
• .navbar__links:hover中的transition
• .navbar__menu中的transition
• .navbar__menu.active中的transition
• .navbar__toggle .bar中的transition

3. 可选优化：防止事件冒泡 #

如果修复后仍有异常，可给点击事件添加阻止冒泡逻辑，避免触发父元素的额外事件：

menu.addEventListener('click',function(e){
  e.stopPropagation();
  menu.classList.toggle('is-active');
  menuLinks.classList.toggle('active');
});

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