JavaScript汉堡菜单无法打开：$未定义报错排查求助

这个错误的核心原因是你的网站没有加载jQuery库，或者jQuery加载顺序晚于汉堡菜单的JS代码——$是jQuery的默认别名，代码里用到$却没加载jQuery就会触发这个报错，原网站能正常运行是因为它已经引入了jQuery。

以下是具体解决方法：

• 引入jQuery库：在你的汉堡菜单JS代码之前，添加jQuery的引入代码。可以用CDN链接，也可以用本地下载的jQuery文件：

  <!-- 用CDN引入，放在<head>或</body>前都可以，注意要在菜单JS代码之前 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 调整加载顺序：如果已经引入了jQuery但还是报错，检查代码顺序，确保jQuery的<script>标签在所有依赖它的汉堡菜单JS代码之前执行。建议把所有JS代码放在页面底部（</body>闭合标签前），这样能避免DOM未加载完成的问题，同时保证jQuery先加载。

• 改用原生JavaScript（可选）：如果不想依赖jQuery，可以把汉堡菜单的代码改成原生JS写法，比如：

  • 将$('.hamburger').click(function(){...})替换为：

    document.querySelector('.hamburger').addEventListener('click', function() {
      // 原菜单逻辑代码
    });
    

  • 将$('.menu').toggleClass('active')替换为：

    document.querySelector('.menu').classList.toggle('active');
    

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