响应式单页Lottie汉堡菜单点击导航链接复位问题咨询

你只需要在现有JS代码的末尾追加以下代码即可同时满足两个需求：

/* 点击导航链接关闭菜单并复位Lottie动画 */
const navLinks = document.querySelectorAll(".nav__menu a");
navLinks.forEach(link => {
  link.addEventListener("click", function() {
    // 仅在菜单打开状态下执行关闭逻辑，避免桌面端无效触发
    if (!pageHeader.classList.contains(menuOpenedClass)) return;
    // 移除菜单打开类，收起菜单
    pageHeader.classList.remove(menuOpenedClass);
    // 重置汉堡按钮的无障碍属性
    toggleMenu.setAttribute("aria-label", "Open navigation");
    toggleMenu.setAttribute("aria-expanded", "false");
    // 播放Lottie关闭动画，复位为汉堡图标状态
    player.getLottie().playSegments([45, 0], true);
  });
});

逻辑说明 #

• 首先选中菜单内所有导航链接，给每个链接绑定点击事件
• 加了状态判断，仅当移动端菜单处于展开状态时才执行后续操作，不会影响桌面端导航的正常点击
• 执行的逻辑和原有代码中点击汉堡按钮关闭菜单的逻辑完全一致，保证交互表现统一

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