menu close on click on body page

Question

i have created a dropdown menu which opens on clicking the nav button. But i couldn't find a way to close the dropdown menu when the mouse clicks on the body of the page.

I you can figure it out, please help me

(function(){
    var bodyEl = $('body'),
    navToggleBtn= bodyEl.find('.nav-toggle-btn');
    navToggleBtn.on('click', function(e){
        bodyEl.toggleClass('active-nav');
        e.preventDefault();
    });
})();

active-nav is created within css and linked with menu and body

Answer 1

I don't know if it is the right solution, but I would add a div element that covers the entire page.

The menu is on top of that div, but the rest is below. If you click the div, it closes itself and the menu.

So basically, it's a lightbox (as for showing images), but without the shade. Or width a shade, because it will make your menu stand out a little more, and it will fit the expectations of disabling clicks on specific elements in the body.

Another advantage of having an extra element instead of just capturing clicks on the main level on the body, it that it won't interfere with other event handlers on the body itself, which could capture the click and therefor have unexpected results for someone who just wants to close the menu.

A rough example can be found below:

 $('header > ul > li').on('click', function() { // Deactive all menu items $('ul.active').removeClass('active'); // Activate the one clicked. $(this).closest('li').addClass('active'); // If there is no lightbox setup a new one. var box = $('.lightbox'); if (box.length == 0) { // It's just a div with a class. $('<div>') .prependTo($('body')) .addClass('lightbox') .on('click', function() { // Lightbox clicked? Remove it, and deactivate the menu. $('.lightbox').remove(); $('li.active').removeClass('active'); }); } }); 

 li { padding: 1em; } header > ul > li { display: inline-block; vertical-align: top; position: relative; background-color: #eee; } li > ul { display: none; background-color: #ddd; position: absolute; top: 100%; left: 0; } li.active > ul { display: block; } .lightbox { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0, 0.2); /* Just for show */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> Header, page title <ul> <li>Main <ul> <li>sub</li> <li>sub</li> <li>sub</li> <li>sub</li> </ul> </li> <li>Other</li> <li>About</li> </ul> </header> <section> Main content </section> 

Answer 2

You can bind click event to body, then check if the event is generated from a particular element using event.target

var bodyEl = $('body');
navToggleBtn = bodyEl.find('.nav-toggle-btn');
$('body').on('click', function (e) {
    if ($(e.target).hasClass("nav-toggle-btn")) {
        bodyEl.toggleClass('active-nav');
        e.preventDefault();
        e.stopPropagation();
    }
    else
    {
        //close the menu here
    }
});