移动端Overlay菜单点击锚点链接后无法关闭的问题求助

问题 #

移动端菜单点击普通外部链接时会自动关闭，但点击锚点链接（如#home）时，页面能正常滚动到对应锚点位置，菜单却不会关闭。如何实现点击锚点链接时，让Overlay菜单和点击普通链接一样自动关闭？

现有代码 #

HTML

<div class="open-nav-menu">
<span></span>
</div>
<div class="menu-overlay">
</div>
<nav class="nav-menu">
  <div class="close-nav-menu">
  <i class="fa-solid fa-xmark"></i>
  </div>
<ul class="menu">
  <li class="menu-item"><a href="#home">Home</a></li>
  <li class="menu-item"><a href="#join">Join</a></li>
</ul>
</nav>
</div>

JavaScript

(() => {
    const openNavMenu = document.querySelector(".open-nav-menu"),
        closeNavMenu = document.querySelector(".close-nav-menu"),
        navMenu = document.querySelector(".nav-menu"),
        menuOverlay = document.querySelector(".menu-overlay"),
        mediaSize = 991;
    openNavMenu.addEventListener("click", toggleNav);
    closeNavMenu.addEventListener("click", toggleNav);
    // close the navMenu by clicking outside
    menuOverlay.addEventListener("click", toggleNav);


    function toggleNav() {
        navMenu.classList.toggle("open");
        menuOverlay.classList.toggle("active");
        document.body.classList.toggle("hidden-scrolling");
    }
    navMenu.addEventListener("click", (event) => {
        if (event.target.hasAttribute("data-toggle") && window.innerWidth <= mediaSize) {
            // prevent default anchor click behavior
            event.preventDefault();
            const menuItemHasChildren = event.target.parentElement;
            // if menuItemHasChildren is already expanded, collapse it
            if (menuItemHasChildren.classList.contains("active")) {
                collapseSubMenu();
            } else {
                // collapse existing expanded menuItemHasChildren
                if (navMenu.querySelector(".menu-item-has-children.active")) {
                    collapseSubMenu();
                }
                // expand new menuItemHasChildren
                menuItemHasChildren.classList.add("active");
                const subMenu = menuItemHasChildren.querySelector(".sub-menu");
                subMenu.style.maxHeight = subMenu.scrollHeight + "px";
            }
        }
    });

    function collapseSubMenu() {
        navMenu.querySelector(".menu-item-has-children.active .sub-menu").removeAttribute("style");
        navMenu.querySelector(".menu-item-has-children.active").classList.remove("active");
    }

    function resizeFix() {
        // if navMenu is open ,close it
        if (navMenu.classList.contains("open")) {
            toggleNav();
        }
        // if menuItemHasChildren is expanded , collapse it
        if (navMenu.querySelector(".menu-item-has-children.active")) {
            collapseSubMenu();
        }
    }
    window.addEventListener("resize", function () {
        if (this.innerWidth > mediaSize) {
            resizeFix();
        }
    });
})();

解决方案 #

只需修改JavaScript中navMenu的点击事件处理逻辑，添加对锚点链接的判断，当点击锚点链接时调用关闭菜单的函数即可。

修改后的navMenu点击事件代码如下：

navMenu.addEventListener("click", (event) => {
    // 新增：处理锚点链接关闭菜单
    const target = event.target;
    if (target.tagName === 'A' && target.getAttribute('href').startsWith('#') && window.innerWidth <= mediaSize) {
        toggleNav();
    }

    // 原有子菜单展开逻辑保留不变
    if (target.hasAttribute("data-toggle") && window.innerWidth <= mediaSize) {
        event.preventDefault();
        const menuItemHasChildren = target.parentElement;
        if (menuItemHasChildren.classList.contains("active")) {
            collapseSubMenu();
        } else {
            if (navMenu.querySelector(".menu-item-has-children.active")) {
                collapseSubMenu();
            }
            menuItemHasChildren.classList.add("active");
            const subMenu = menuItemHasChildren.querySelector(".sub-menu");
            subMenu.style.maxHeight = subMenu.scrollHeight + "px";
        }
    }
});

逻辑说明

• 新增代码会判断点击元素是否为<a>标签、href是否以#开头（锚点链接），同时当前处于移动端视图（窗口宽度≤mediaSize）。
• 满足条件时直接调用toggleNav()关闭菜单，锚点跳转的默认行为不受影响，页面依然能正常滚动到对应位置。

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