点击导航栏菜单项时如何关闭导航菜单？

你可以通过以下步骤实现需求：

1. 补充获取菜单项元素：现有代码里的items变量未定义，先添加代码获取所有带.item类的菜单项。
2. 封装关闭菜单逻辑：单独写一个关闭菜单的函数，确保只在菜单展开时执行关闭操作。
3. 绑定点击事件：给每个菜单项添加点击事件，触发菜单关闭。

修改后的完整JS代码如下：

const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu");
// 补充获取所有菜单项
const items = document.querySelectorAll(".item");

/* Toggle mobile menu */
function toggleMenu() {
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
  } else {
    menu.classList.add("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
  }
}

/* 新增：关闭菜单的函数 */
function closeMenu() {
  // 仅当菜单处于激活状态时执行关闭
  if (menu.classList.contains("active")) {
    menu.classList.remove("active");
    toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
  }
}

/* Event Listeners */
toggle.addEventListener("click", toggleMenu, false);
// 给每个菜单项绑定点击关闭事件
items.forEach(item => {
  item.addEventListener("click", closeMenu, false);
});

说明 #

• 点击任意.item类的菜单项时，会自动检查菜单是否处于展开状态，若已展开则立即收起，并将切换按钮还原为汉堡图标。
• 原有的移动端菜单展开/收起逻辑不受影响，保持功能完整性。

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