I am encountering a difficult issue with this HTML template Click Here. To resolve it, please navigate to the 1st template Demo under Shop Pages as indicated in the image below.
https://i.sstatic.net/TlutO.jpg
(Please adjust your browser to a mobile screen size)
Currently, when a user opens the mobile dropdown menu on the left, they should be able to close it by clicking outside the menu, anywhere else on the page. The current behavior only allows closure by clicking the hamburger icon.
In addition, if the user has the menu open and clicks on the page but then attempts to click the hamburger icon again due to the initial click not working, the page freezes and requires multiple taps to scroll again, causing inconvenience for mobile users.
I have tried to address this issue with the code snippet below. However, once the menu slides back up, it does not reappear:
<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 also attempted adding another piece of code to allow the menu to appear again when the user clicks the hamburger icon, but it caused buggy behavior as the menu would slide down once and disappear upon further interaction:
<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 ensure this functionality works correctly as needed? Thank you!