Javascript 如何通过单击菜单外部关闭移动菜单

我的网站是基于可湿性粉剂的主题和网站上的主菜单是汉堡菜单。 菜单宽度约为屏幕宽度的1/4（在桌面上）

我想在屏幕的3/4提醒中点击任何地方，点击会折叠菜单。当前仅当我选择“X”按钮时它才会关闭

请访问以下网站：

下面是相关的JS代码，可以让它运行起来。我可以根据您的建议，在本规范中添加/修改哪些内容，以实现这一目标

/*导航事件*/
jQuery（'.nav-butter.hidden_菜单，.nav-butter.visible_菜单'）。打开（'click'，函数（）{
if（jQuery（this）.hasClass（'active'））{
jQuery（this）.removeClass（'active'）.parents（'site header'）.find（'navigation'）.removeClass（'active'）；
}否则{
jQuery（this）.addClass（'active'）.parents（'site header'）.find（'navigation'）.addClass（'active'）；
}
});
jQuery（'.nav butter.side_菜单'）。打开（'单击'，函数（）{
if（jQuery（this）.hasClass（'active'））{
jQuery（this.removeClass（'active'）；
jQuery（'.site header-side-nav'）.removeClass（'active'）；
}否则{
jQuery（this.addClass（'active'）；
jQuery（'.site header-side-nav'）.addClass（'active'）；
}
});
jQuery（'[href=“#”]”）。在（'click'，函数（e）上{
e、 预防默认值（）；
});
jQuery（'.side导航a'）。在（'click'，函数（e）上{
var$el=jQuery（此），
$parent=$el.parent（）；
if（$parent.hasClass（'menu-item-has-children'）&&！$parent.hasClass（'active'））{
e、 预防默认值（）；
$parent.addClass（'hide active'）.sides（）.addClass（'hide'）；
$el.parents（'.sub-menu'）.addClass（'opened'）；
}
});
jQuery（'.side导航.sub菜单>.back'）。打开（'单击'，函数（）{
var$el=jQuery（本）；
$el.parent（）.parent（）.removeClass（'hide-active'）。同胞（）.removeClass（'hide'）；
$el.parent（）.parent（）.removeClass（'opened'）.parent（）.removeClass（'opened'）；
});
jQuery（“.side navigation”）.find（“.sub-menu”）.prepend（“
”）您可以在菜单后面添加一个透明层，上面有一个事件。因此，当用户单击透明层时，菜单将关闭

小例子：


$（文档）.ready（函数（）{
$（“#菜单开启器”）。单击（函数（）{
$（“.menu container”）.toggle（）；
})
$（“#菜单层”）。单击（函数（）{
$（“.menu container”）.toggle（）；
})
});
body，html{
身高：100%；
宽度：100%；
填充：0px；
}
.菜单容器{
位置：绝对位置；
右：0px；
顶部：0px；
底部：0px；
左：0px；
}
#菜单层{
z指数：1；
位置：绝对位置；
右：0px；
顶部：0px；
底部：0px；
左：0px；
背景色：透明；
}
.菜单{
位置：绝对位置；
z指数：2；
右：0px；
顶部：0px；
底部：0px；
宽度：100px；
背景颜色：蓝色；
}

打开菜单
这是菜单
您可以在菜单后面添加一个透明层，上面有一个事件。因此，当用户单击透明层时，菜单将关闭

小例子：


$（文档）.ready（函数（）{
$（“#菜单开启器”）。单击（函数（）{
$（“.menu container”）.toggle（）；
})
$（“#菜单层”）。单击（函数（）{
$（“.menu container”）.toggle（）；
})
});
body，html{
身高：100%；
宽度：100%；
填充：0px；
}
.菜单容器{
位置：绝对位置；
右：0px；
顶部：0px；
底部：0px；
左：0px；
}
#菜单层{
z指数：1；
位置：绝对位置；
右：0px；
顶部：0px；
底部：0px；
左：0px；
背景色：透明；
}
.菜单{
位置：绝对位置；
z指数：2；
右：0px；
顶部：0px；
底部：0px；
宽度：100px；
背景颜色：蓝色；
}

打开菜单
这是菜单
请在此处添加html和css代码请在此处添加html和css代码