javascript - Div 在复选框上切换，但在 div 外部时检测到单击以关闭

Question

我正在尝试让我的汉堡菜单在菜单 (.NavMenu) 之外时检测到点击，并将汉堡复选框更改回未选中状态。

我试过使用 event.stopPropagation(); 并尝试检测文档中的点击，但我的 javascript 知识非常有限，所以我要么根本无法显示 .NavMenu，要么.NavMenu 在外部单击时关闭，但汉堡菜单保持打开状态 (X)。

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

http://jsfiddle.net/s9ndequ2/

Answer 1

在带有 class='NavMenu' 的 div 上添加 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 );
      }
    }
    }

希望这会有所帮助。