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

Question

I am having alot of trouble trying to fix this issue with this HTML template Click Here . Please scroll to the 1st template Demo under Shop Pages as shown in the image below.

(Please resize your browser to a mobile screen size)

When the user opens the mobile dropdown menu on the left, he should be able to close it by clicking outside of the menu, like by clicking anywhere else on the body of the page. Currently this only closes when the user clicks on the hamburger icon.

Also, currently if the user has the menu open and then he clicks on the body of the page and then goes back to click the hamburger icon because clicking the page did not work, the page freezes up and you are unable to scroll unless you tap the screen a bunch of times because that vertical scroll bar comes in and it has the focus I guess (creating a bad experience for mobile users).

I have tried to fix this with the following code I wrote, but once the menu slides back up it never comes back down as if it was deleted from the page:

<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>

I have also tried to add this piece of code to the page as well so that the menu can reappear if the user clicks on the hamburger icon again but it makes the page buggy because the menu will only come down once and then disappear again if you click on the body again while trying to close it.

<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>

How can I get this to work the way I need it to ? Thank you!

Answer 1

I was able to somewhat fix this by adding some custom classes to the div for the icon button and by writing this snippet of code which seemed to do the trick for me.

<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>