javascript - div启用复选框，但在div之外时检测点击以关闭

我试图使我的汉堡菜单在菜单（.NavMenu）外部时检测到单击，并将“汉堡”复选框更改回未选中状态。

我已经尝试过使用event.stopPropagation();并尝试检测文档中的点击，但是我的JavaScript知识真的很有限，所以我要么无法显示.NavMenu，要么在外面单击时关闭.NavMenu，但是汉堡菜单仍然像它是打开的（X）。

任何人都可以在div外部单击时关闭菜单（也将触发该复选框），如何帮助我关闭菜单？

http://jsfiddle.net/s9ndequ2/

最佳答案

在div上使用class ='NavMenu'添加id'burgerMenu'。

并将您的JavaScript修改为

$('#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 );
      }
    }
    }

希望这会有所帮助。