javascript - Closing a menu when you click on it or outside of it

I have a nav in a box with this
html:

            id="theMenu">
 

             class="logo">            href="index.html#home">LOGO

             class="icon-remove menu-close">


             href="#headerwrap">HOME
             href="#information">INFO
             href="#portfolio">Portfolio
 


            
 
            class="icon-reorder">

And
this
jQuery:

;(function(){


            // Menu settings
 $('#menuToggle, .menu-close').on('click',
            function(){
 $('#menuToggle').toggleClass('active');

            $('body').toggleClass('body-push-toleft');

            $('#theMenu').toggleClass('menu-open');

 });


            })(jQuery)

Can you
please help me and write me what I have to add in the js to close my menu when I click
in the menu button but ALSO when I clicked outside ?

Answer

You can bind click on the whole body, for
instance:

$(window).on('click',
            function() {


            $('#theMenu').removeClass('menu-open');
})

that's
it.
If 'themenu' has class 'menu-open', on window-click this class will be
removed.

Otherwise you can
consider the example in this rel="nofollow">DEMO.