仿照Instagram教程制作的动画菜单无法生效，请求技术排查

你的JavaScript代码在DOM元素加载完成前就执行了，导致document.querySelector(".cuadrado")无法找到目标元素，点击事件绑定失败，最终菜单动画无法触发。这是脚本引入时机错误导致的典型问题，以下是两种可行的修复方案：

方案1：调整脚本标签位置 #

将<script>标签移到<body>标签的末尾，确保DOM元素先完成渲染，再加载执行JavaScript代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prueba menu</title>
  <link rel="stylesheet" type="text/css" href="estilo.css">
</head>

<body>
  <div class="cuadrado">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- 将脚本移至body末尾 -->
  <script src="animation.js" type="text/javascript"></script>
</body>

</html>

方案2：使用DOM加载完成事件包裹代码 #

在JavaScript文件中添加DOMContentLoaded事件监听，确保DOM完全加载后再执行元素查找和事件绑定逻辑：

document.addEventListener('DOMContentLoaded', () => {
  let cuadrado = document.querySelector(".cuadrado");
  cuadrado.addEventListener("click", () =>
    cuadrado.classList.toggle("active"));
});

两种方案都能确保脚本在DOM元素存在后再执行，修复点击事件绑定失败的问题，菜单动画即可正常运行。

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