如何在单击锚点链接时关闭移动菜单

<nav class="mobile-menu">
  <ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
  </ul>
</nav>

.mobile-menu {
  display: none; /* 初始状态下隐藏菜单 */
}

.mobile-menu.active {
  display: block; /* 添加.active类名以显示菜单 */
  /* 可以添加过渡效果或动画效果来实现平滑的菜单关闭效果 */
}

// 获取移动菜单的DOM元素
const mobileMenu = document.querySelector('.mobile-menu');

// 获取所有菜单项的DOM元素
const menuItems = mobileMenu.querySelectorAll('a');

// 为每个菜单项添加点击事件监听器
menuItems.forEach(item => {
  item.addEventListener('click', () => {
    // 添加.active类名以隐藏菜单
    mobileMenu.classList.remove('active');
  });
});