点击锚点链接时汉堡下拉菜单无法关闭的问题排查

问题场景 #

网站使用汉堡菜单，点击普通链接时页面刷新，菜单可正常关闭；但点击锚点链接（如#link）时，菜单无法自动关闭，需手动操作。

解决代码 #

var skipContents = $j('.skip-content');
var skipLinks = $j('.skip-link');
var searchField = $j('#search');

// 封装关闭菜单的通用函数
function closeMenu() {
    skipLinks.removeClass('skip-active');
    skipContents.removeClass('skip-active');
    $j('body').removeClass('nav-open cart-open');
}

skipLinks.on('click', function (e) {
    if ($j(this).hasClass('direct-link')) return true;
    e.preventDefault();

    var self = $j(this);
    var isNav = self.hasClass('skip-nav');
    var isCart = self.hasClass('skip-cart');
    var isSearch = self.hasClass('skip-search');
    var body = $j('body');
    var target = self.attr('data-target-element') ? self.attr('data-target-element') : self.attr('href');
    var elem = $j(target);
    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0;

    // 先隐藏所有面板
    closeMenu();

    // 切换面板状态
    if (!isSkipContentOpen) {
        self.addClass('skip-active');
        elem.addClass('skip-active');
        if (isNav) { body.addClass('nav-open'); }
        if (isCart) { body.addClass('cart-open'); }
        if (isSearch) { searchField.focus(); }
    }
});

$j('#header-cart').on('click', '.skip-link-close', function(e) {
    closeMenu();
    e.preventDefault();
});

// 监听菜单内的锚点链接点击，触发关闭逻辑
$j('.skip-content a[href^="#"]').on('click', function() {
    closeMenu();
});

关键改动说明 #

• 抽离通用关闭逻辑：将重复的菜单关闭代码封装成closeMenu()函数，避免冗余，方便统一调用。
• 替换原有关闭代码：把原代码中分散的菜单关闭操作全部替换为调用closeMenu()，保证逻辑一致性。
• 新增锚点监听：给菜单面板内所有以#开头的锚点链接绑定点击事件，点击时自动执行菜单关闭逻辑，不影响锚点跳转功能。

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