div启用复选框，但在div之外时检测到单击以关闭

Question

I'm trying to make my burger menu detect click when outside of the menu (.NavMenu) and change the hamburger checkbox back to unselected.

I've tried using event.stopPropagation(); and trying to detect clicks in the document but my javascript knowledge is really limited so I am either not being able to show .NavMenu at all or .NavMenu closes when clicked outside but the hamburger menu stays as if it was open (X).

Can anyone help me with how to get the menu to close when clicked outside of the div that will also trigger the checkbox?

http://jsfiddle.net/s9ndequ2/

Answer 1

You can achieve that by giving some id or class to the main div which will holding your page contents and then in script you can detect whether click has been performed inside that div or not :

Considering your main div has class mainDiv you can add below snippet to your script to achieve what you have asked for :

$(".mainDiv").click(function(){
    if($('#burger').is(':checked'))
    $('#burger').click();
}); 

Answer 2

Try this at your fiddle:

$('#burger').click(function(event) {
 event.stopPropagation();
 if( $(this).is(':checked')) {
    $(".NavMenu").show();       
 } else {
    $(".NavMenu").hide();
 }
});  

$('body').click(function() {
  if ( $('#burger').is(':checked')) {
    $(".NavMenu").hide();
    $( "#burger" ).prop( "checked", false );
  }
})

$('.NavMenu').click(function(event) {
  event.stopPropagation();
})

http://jsfiddle.net/s9ndequ2/2/

Answer 3

Add id 'burgerMenu' on div with class='NavMenu'.

And modify your JavaScript as

$('#burger').click(function() {
     if( $(this).is(':checked')) {
        $(".NavMenu").show();       
     } else {
        $(".NavMenu").hide();
     }
    });  
    $('body').click(function(event){
      removeBurger(event)
    })
    //this detects that user has clicked outside the menu
    function removeBurger(e){
      var targ;
      if (!e) {
          var e = window.event;
      }
      if (e.target) {
          targ=e.target;
      } else if (e.srcElement) {
          targ=e.srcElement;
      }
      if(targ.id!="burgerMenu" && targ.id!="burger"){
        if ( $('#burger').is(':checked')) {
        $(".NavMenu").hide();
        $( "#burger" ).prop( "checked", false );
      }
    }
    }

Hope this will help.