响应式导航栏转Burger Menu时汉堡按钮点击无响应问题求助

问题排查结果 #

你的问题和jQuery、Node环境完全无关，都是拼写错误、类名不匹配、选择器逻辑错误导致的，具体问题和修复方案如下：

• HTML标签拼写错误，导致JS文件根本未加载
  你引入自定义JS的标签写错了，缺少字母t：
  错误写法：<scrip src="script.js"></scrip>
  正确写法：<script src="script.js"></script>
  另外你的代码全程没有用到jQuery语法，可以直接删掉jQuery的引入语句，不需要额外引入jQuery。

• JS切换的类名和CSS选择器不匹配，且选择器层级错误

  1. 你的JS代码是给.main-nav切换show类，但CSS里控制菜单显示的类是独立的.nav-active，二者完全不对应
  2. 你需要通过父级的类控制子元素.nav-links的位移，正确的CSS选择器应该改成：

  .main-nav.show .nav-links {
       transform: translateX(0%);
   }
  

  把你原来单独写的.nav-active类替换成上面的代码即可。

• CSS属性拼写错误，汉堡动画会失效
  你写的traslate是错误拼写，缺少字母n，正确为translate，同时line3的Y轴位移值需要调整为负值才能拼成叉号：

  .toggle .line1 {
      transform: rotate(-45deg) translate(-5px, 6px);
  }
  .toggle .line3 {
      transform: rotate(45deg) translate(-5px, -6px);  
  }
  

• 额外无效属性修正
  媒体查询里的.nav-links li {opacity: 10;}是无效值，opacity取值范围为0-1，改为opacity: 1;即可。

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