移动端网页下拉菜单点击外部区域无法关闭该如何解决？

实现方案 #

你只需在现有JS代码末尾新增全局点击监听逻辑，即可实现点击菜单外区域自动关闭的效果，代码如下：

// 点击外部区域关闭移动端菜单
$(document).on('click', function (e) {
    // 点击目标既不是菜单内部元素，也不是汉堡按钮时，关闭菜单
    if (!$(e.target).closest(nav).length && !$(e.target).closest(navToggle).length) {
        nav.removeClass('show');
    }
})

// 阻止菜单、汉堡按钮的点击事件冒泡到全局，避免点击菜单/汉堡时误触发关闭逻辑
nav.on('click', function (e) {
    e.stopPropagation()
})
navToggle.on('click', function (e) {
    e.stopPropagation()
})

注意：你当前HTML代码中存在重复的id="header"属性，外层header标签和内层header__inner标签都使用了相同的id，id属性在页面中必须唯一，重复id会导致JS选择器异常，建议你修改内层header__inner的id为其他值或者直接删除冗余id。

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