当用户在移动屏幕尺寸上点击下拉菜单外部时如何关闭下拉菜单

Question

我在尝试使用此 HTML 模板 Click Here 解决此问题时遇到了很多麻烦。请滚动到商店页面下的第一个模板演示，如下图所示。

（请将您的浏览器调整为手机屏幕大小）

当用户打开左侧的移动下拉菜单时，他应该能够通过点击菜单外部来关闭它，就像点击页面主体的其他任何地方一样。目前只有当用户点击汉堡包图标时才会关闭。

此外，目前如果用户打开菜单，然后点击页面正文，然后返回点击汉堡包图标，因为点击页面不起作用，页面会冻结，您无法使用滚动，除非你多次点击屏幕，因为垂直滚动条进来了，我猜它有焦点（给移动用户带来糟糕的体验）。

我已尝试使用我编写的以下代码解决此问题，但是一旦菜单向上滑动，它就再也不会向下滑动，就好像它已从页面中删除一样：

<script>
$(document).on("click", function (event) {
    var $trigger = $(".mobile-menu.hamburger-icon");
    if ($trigger !== event.target && !$trigger.has(event.target).length){           
        //THIS IS WHAT WORKS BUT YOU HAVE TO CLICK OUTSIDE LIKE TWICE FOR IT TO COME BACK
        $(".mobile-navigation.dl-menuwrapper").slideUp("fast");                                                     
    }               
});
</script>

我也尝试将这段代码添加到页面中，这样如果用户再次单击汉堡包图标，菜单可以重新出现，但这会使页面出现错误，因为菜单只会出现一次，并且如果您在尝试关闭它时再次单击正文，然后再次消失。

<script>
$(document).on("click", function (event) {
    var $trigger = $(".mobile-menu.hamburger-icon");
    if ($trigger !== event.target && !$trigger.has(event.target).length){           
        //THIS IS WHAT WORKS BUT YOU HAVE TO CLICK OUTSIDE LIKE TWICE FOR IT TO COME BACK
        $(".mobile-navigation.dl-menuwrapper").slideUp("fast");                                                       
    }               
});
</script>


<script>
    $(".mobile-menu.hamburger-icon").on("click", function (event) {        
        $(".mobile-navigation.dl-menuwrapper").slideDown("fast");                            
    });
</script>

我怎样才能让它按照我需要的方式工作？谢谢！

Answer 1

我可以通过向图标按钮的 div 添加一些自定义类并编写这段似乎对我有用的代码片段来解决这个问题。

<script>
$(document).on("click", function (event) {
    var $BMI = $(".mobile-menu.hamburger-icon");
    var $VMM = $(".dl-menu.dl-menuopen");
    
    if ($BMI !== event.target && !$BMI.has(event.target).length && ($VMM.is(":hidden"))) {
                              
        $(".mobile-navigation.dl-menuwrapper.open-mobile-menu").addClass('open-mobile-menu');
        
        $(".dl-menu.dl-menuopen").addClass('dl-menuopen');           
    }        
    
 </script>

当用户在移动屏幕尺寸上点击下拉菜单外部时如何关闭下拉菜单

How to close dropdown menu when user clicks outside of it on mobile screen size

html

css

jquery

user-experience

bootstrap-4