为什么我的JavaScript切换按钮无法打开响应式导航菜单

核心错误点 #

• 你为.nav-list.active设置了显示属性，但移动端媒体查询中统一给.nav-list下的li设置了display: none，父元素显示后子元素仍处于隐藏状态，所以看不到导航内容。
• 移动端默认状态下没有给.nav-list本身设置隐藏，且padding: .5 rem 1 rem写法错误，数值和单位之间不能加空格，导致属性不生效。

修复代码 #

仅需修改媒体查询内的CSS部分即可，JS和HTML逻辑无需改动： #

@media screen and (max-width: 740px) {
  /* Responsive Navbar */
  .nav-icon li {
    display: block;
  }
  /* 新增：移动端默认隐藏导航列表 */
  .nav-list {
    display: none;
    width: 100%;
  }
  .nav-list li {
    display: none;
    text-align: center;
  }
  .nav-list ul {
    flex-direction: column;
    width: 100%;
  }
  .nav-list li a {
    /* 修复单位空格问题 */
    padding: .5rem 1rem;
  }
  /* For Javascript */
  .nav-list.active {
    display: flex;
    flex-direction: column;
  }
  /* 新增：激活状态下显示所有li */
  .nav-list.active li {
    display: block;
  }
}

验证说明 #

修改后点击汉堡按钮，JS会给.nav-list切换active类，父元素切换显示状态的同时子元素li也会显示，即可正常展开收起导航。

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