移动端导航菜单点击锚链接后未自动关闭问题求助

我们的网站是单页滚动类型，用导航菜单里的锚点链接实现页面内滚动。但在移动端菜单中点击链接后，页面能正常滚动，菜单却一直保持展开状态，我们已经尝试通过代码解决但没效果。这是我第一次用这个平台，要是信息给得不够请见谅！我查过同类主题的帖子，没找到相似场景，恳请帮忙！

附上当前使用的代码：

jQuery(document).ready(function($){
    // 处理带子菜单的菜单项点击
    $(document).on('click','nav li.menu-item-has-children > a',function(e){
        e.preventDefault();
        var open = $(this).parent('li').hasClass('show');
        if(open){
            // 关闭子菜单
            $(this).parent('li').removeClass('show');
            $(this).attr('aria-expanded', 'false');
        }else{
            // 检查是否点击的是子菜单
            var subClick = $(this).parent('li').parent('ul').hasClass('sub-menu');
            if(!subClick){
                $('li.menu-item-has-children').removeClass('show');
            }
            // 打开子菜单
            $(this).parent('li').addClass('show');
            $(this).attr('aria-expanded', 'true');
        }
        return false;
    });
    // 切换移动端菜单显示/隐藏
    $("#mobile-icon").click(function(e){
        e.preventDefault();
        console.log('clicked');
        var open = $(this).hasClass('is-open');
        if(open){
            $(this).removeClass('is-open');
            $('nav#mobile').removeClass('is-open');
        }else{
            $(this).addClass('is-open');
            $('nav#mobile').addClass('is-open');
        }
    });
});

问题出在当前代码只处理了带子菜单的菜单项点击，没有处理普通锚点链接的点击事件。要解决这个问题，需要给移动端菜单里的所有锚点链接添加点击事件，在点击后关闭展开的菜单。

可以在现有代码基础上添加以下逻辑：

jQuery(document).ready(function($){
    // 处理带子菜单的菜单项点击（原有代码保留）
    $(document).on('click','nav li.menu-item-has-children > a',function(e){
        e.preventDefault();
        var open = $(this).parent('li').hasClass('show');
        if(open){
            $(this).parent('li').removeClass('show');
            $(this).attr('aria-expanded', 'false');
        }else{
            var subClick = $(this).parent('li').parent('ul').hasClass('sub-menu');
            if(!subClick){
                $('li.menu-item-has-children').removeClass('show');
            }
            $(this).parent('li').addClass('show');
            $(this).attr('aria-expanded', 'true');
        }
        return false;
    });
    // 切换移动端菜单显示/隐藏（原有代码保留）
    $("#mobile-icon").click(function(e){
        e.preventDefault();
        console.log('clicked');
        var open = $(this).hasClass('is-open');
        if(open){
            $(this).removeClass('is-open');
            $('nav#mobile').removeClass('is-open');
        }else{
            $(this).addClass('is-open');
            $('nav#mobile').addClass('is-open');
        }
    });

    // 新增：点击移动端菜单的锚点链接后关闭菜单
    $(document).on('click', 'nav#mobile a[href^="#"]', function(e){
        // 仅当移动端菜单处于展开状态时执行
        if($('#mobile-icon').hasClass('is-open')){
            $('#mobile-icon').removeClass('is-open');
            $('nav#mobile').removeClass('is-open');
        }
    });
});

说明 #

• 新增的事件监听针对nav#mobile下所有以#开头的锚点链接，确保只处理移动端菜单的内部链接
• 先判断移动端菜单是否处于展开状态，避免不必要的DOM操作
• 点击锚点链接后，直接移除菜单和图标上的is-open类，还原菜单收起状态

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