点击页面任意区域隐藏移动端菜单问题求助

问题根源 #

你的代码存在三个关键问题：

• 未声明event参数：$(document).click(function() {里没传入event，但代码里用到了event.target，导致event未定义，逻辑直接失效。
• 事件冒泡冲突：点击.menu-toggle按钮时，事件会冒泡到document，触发隐藏逻辑，导致菜单刚打开就被关掉。
• 状态不同步：直接用container.hide()隐藏菜单，但没移除header的is-open类，下次点击切换按钮时逻辑会混乱。

修正后的完整代码 #

1. 修复菜单切换按钮事件（阻止冒泡） #

$('.menu-toggle').on('click',function(e){
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡到document，避免刚打开就隐藏
    if ( $('.lang-mobile').hasClass('is-open') ){
        $('.lang-mobile a').trigger('click')
    }
    if ( !$('header').hasClass('is-open')){
        $('header').addClass('is-open');
        $('#navbar-main').fadeIn();
    }
    else {
        $('header').removeClass('is-open');
        $('#navbar-main').fadeOut();
    }
});

2. 修复document点击事件（补全参数+同步状态） #

$(document).click(function(event) {
    var container = $("#navbar-main");
    var header = $("header");
    // 仅当菜单处于打开状态，且点击区域不在菜单内时执行隐藏
    if (!container.is(event.target) && !container.has(event.target).length && header.hasClass('is-open')) {
        header.removeClass('is-open');
        $('#navbar-main').fadeOut(); // 和切换按钮保持一致的动画效果
    }
});

额外注意 #

• 确保jQuery已正确引入，无版本冲突。
• 如果菜单内有子交互元素（比如子菜单按钮），也要给这些元素添加e.stopPropagation()，避免误触发菜单隐藏。

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