汉堡按钮按下时不展开

Question

在移动视图上，我将导航栏变成可折叠菜单，但由于某种原因，JavaScript 代码无法正常工作。

const hamburger = document.getElementById("hamburger");
const navLinks = document.getElementById("nav-links");
const profileIcon = document.querySelector(".profile-icon");

hamburger.addEventListener("click", () => {
 console.log("Hamburger clicked!"); 
 navLinks.classList.toggle("active");
 profileIcon.classList.toggle("active");
});   

这是创建三行菜单按钮的 css：

.hamburger {
  display: none; /* Hidden by default; shown on mobile */
  cursor: pointer;
  flex-direction: column;
  gap: 0.3rem;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 3px;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

/* Responsive Styles for Mobile */
@media screen and (max-width: 768px) {
 

  .hamburger {
      display: flex; /* Show hamburger on mobile */
  } 
}

这是有问题的网站：https://enmasantos.github.io/vitality_vista/

Answer 1

如果我在 Chrome 中运行并缩小浏览器的大小，我会看到汉堡图标，并且它会在单击时打开和关闭。如果我在 Chrome 中检查并在移动设备中渲染，它也会正常运行。你没有经历过吗？