JS Hamburger Menu点击菜单项后无法自动折叠的实现方案咨询

方案1：仅实现核心功能（菜单项点击自动折叠，无动画） #

仅需要修改JS代码，给所有菜单项绑定点击事件触发菜单切换即可，无需改动CSS和HTML：

// 保留原有切换函数
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

// 新增以下代码，页面加载后给所有菜单项绑定关闭事件
document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('#myLinks a');
  menuLinks.forEach(link => {
    link.addEventListener('click', myFunction);
  });
});

方案2：核心功能+slide滑入滑出动画 #

需要同时修改JS和CSS，用类名切换控制菜单状态，配合CSS过渡实现动画效果：

1. 修改CSS代码 #

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  /* 移除原有display:none */
  max-height: 0;
  overflow: hidden;
  /* 动画配置：时长0.3s，缓动函数ease-out，可自行调整 */
  transition: max-height 0.3s ease-out;
  background-color: #333;
}

/* 新增菜单展开状态类 */
.topnav #myLinks.menu-open {
  max-height: 300px; /* 取值大于菜单实际最大高度即可 */
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}


.topnav a:hover {
  background-color: #ddd;
  color: black;
}


.active {
  background-color: #04AA6D;
  color: white;
}

2. 修改JS代码 #

function myFunction() {
  var x = document.getElementById("myLinks");
  // 切换展开类替代直接控制display
  x.classList.toggle('menu-open');
}

document.addEventListener('DOMContentLoaded', function() {
  const menuLinks = document.querySelectorAll('#myLinks a');
  menuLinks.forEach(link => {
    link.addEventListener('click', myFunction);
  });
});

3. HTML代码无需修改 #

说明：如果菜单的菜单项数量较多，可调整.topnav #myLinks.menu-open中的max-height数值，只要大于你实际菜单的总高度即可。

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