获得隐藏响应式菜单侧边栏的问题，单击外面的任何地方

Question

这里是网站链接 https://machinetoolproducts.com/

我有一个大型商业网站，如果用户在任何地方单击外部页面，则需要隐藏菜单。

StackOverflow中已经有很多解决方案，但不幸的是，它对我不起作用。我知道这是重复的问题，但我已经测试了许多脚本，但是当我单击菜单时，它不会解决问题，这将添加一个带有"屏幕"的类，当再次单击菜单时，该类将添加"屏幕外"。主要问题是，当我在jquery的帮助下删除该类时 "屏幕上"它看起来像这样 http://prntscr.com/f6x66x .

意思是说jQuery工作正常，但我不知道为什么菜单不会完全隐藏。

如果在外面点击，它需要完全隐藏。

以下是代码部分

顶部菜单.html

<div class="TopMenu-mobile hidden-desktop hidden-tablet wow fadeInUp">
<div class="menu-mobile">
<div id="ToggleMenu"> menu </div>
</div>

上面的代码 id="切换菜单" 目标到抽屉菜单.html

抽屉菜单.html

%%GLOBAL_OptimizerLinkScript%%
<div id="DrawerMenu">
<div class="inner">
<ul class="sf-menu sf-horizontal"><li><a href="%%GLOBAL_ShopPath%%">Home</a></li></ul>
%%Panel.SideCategoryList%% 
</div>
</div>
%%Panel.DrawerMenuJavascript%%
%%Panel.HL_Megamenu%%
%%Panel.HL-MegamenuJS%%

请给我提供建议

Answer 1

通过检查您的代码，当您单击汉堡包折叠菜单时，似乎发生了两件事：

屏幕上的课程显示在<div id=DrawerMenu class="on-screen">上，屏幕外的课程显示在<div class="page HL-NoCurrency off-screen">

如果您只是删除DrawerMenu的屏幕上，则会在屏幕截图上显示视觉错误，因此在修改时还需要小心删除其他div的off-screen类

Answer 2

好的，我已经解决了我的问题，因为我说过jquery工作正常，但div结构变坏了，所以我必须像下面这样制作div：

<div class="menu-mobile">
<div id="ToggleMenu"> menu </div>
%%GLOBAL_OptimizerLinkScript%%
<div id="DrawerMenu">
<div class="inner">
<ul class="sf-menu sf-horizontal"><li><a href="%%GLOBAL_ShopPath%%">Home</a></li></ul>
%%Panel.SideCategoryList%%    
</div>
</div>
%%Panel.DrawerMenuJavascript%%
%%Panel.HL_Megamenu%%
%%Panel.HL-MegamenuJS%%  
</div>

然后在单击外部时禁用屏幕上的课程

<script>  
$(document).on("click", function(e) { 
if ($(e.target).is("#ToggleMenu") === false) {
$("#DrawerMenu").removeClass("on-screen");
}
});
</script>