在元素外部单击而不尝试导航按钮时，试图关闭移动菜单（正在删除类）

Question

I'm really struggling to make this work. I have a mobile menu that opens on clicking the button in the header. This adds an active class to the menu to display it. I have made it full width and locked scrolling. But I want it to close when clicking outside the menu, (removing the class) but I can't get it to work.

This is what I've tried:

<script> 
jQuery(document).click(function(event) { 
if(!jQuery(event.target).closest('.navgrid .site__header--mobilenav, .burgerbox').length) {
    if(jQuery('#mobilenavcontainer').hasClass('site__header--mobilenav-active')){
    jQuery('jQuery').removeClass('site__header--mobilenav-active')
}

}        
}); 
</script>

But it doesn't seem to work...

Answer 1

A simple example but I think covering your requirements. The button shows the menu. Click at any place outside the menu to hide it.

 $(document).mouseup(function(e) { const container = $(".menu"); /* Assign outside which element must be clicked */ if (!container.is(e.target) && container.has(e.target).length === 0) { $(".menu").css("display", "none"); } }); $("body").on("click", "button", function() { $(".menu").css("display", "flex"); }); 

 ul { list-style: none; width: 100%; padding: 0; margin: 0; flex-flow: column wrap; display: none; } li { background-color: lightblue; border: thin solid gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Click me</button> <ul class="menu"> <li>Option 1</li> <li>Option 1</li> <li>Option 1</li> </ul>