汉堡菜单点击无响应故障求助：响应式导航栏问题排查

核心问题排查 #

你的代码里有三个关键问题导致汉堡菜单点击无效：

• JavaScript箭头函数语法错误，导致点击事件逻辑无法执行
• CSS误用了:active伪类（仅代表元素被点击瞬间的状态），但JS逻辑是添加/移除active类，两者不匹配
• CSS的padding属性值存在语法错误，空格导致样式失效

修正后的完整代码 #

1. 修正JavaScript代码 #

把错误的箭头函数写法改成标准格式：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('nav_links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

2. 修正CSS代码 #

替换错误的选择器，修正语法问题并合并重复样式：

@media screen and (max-width: 870px){
  .toggle-button{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 24px;
    width: 30px;
    cursor: pointer; /* 添加鼠标指针样式，提升交互感 */
  }

  .bar {
    height: 3px;
    width: 100%;
    background-color: #333;
    border-radius: 10px;
  }
 
  .nav_links{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .cta{
    display: none;
  }
  
  .nav_links li a{
    padding: .5rem 1rem; /* 去掉1和rem之间的空格 */
  }
  
  /* 用.active类替代:active伪类，匹配JS的类切换逻辑 */
  .nav_links.active{
    display: flex;
  }
}

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