如何实现点击容器外部关闭汉堡菜单（Hamburger Menu）？

现有代码 #

HTML

<div class="menu visible-xs">
    <a href="https://imco.org.mx/" class="pull-right"><img style="height:50px; padding-left: 10px; padding-top: 0dvh;" src="images/logo_imco_blanco_transparente.png" alt=""></a>
    <div class="btn">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    
    <nav id="nav">
        <ul>
            <li class="{{ currentMenu['home'] }}"><a ng-href="#!/">Inicio</a></li>
            <li class="{{ currentMenu['career'] }}"><a ng-href="#!/carreras">Busca</a></li>
            <li class="{{ currentMenu['compare'] }}"><a ng-href="#!/compara">Compara</a></li>
            <li class="{{ currentMenu['10'] }}"><a ng-href="#!/las-10-mas">Las 10 más</a></li>
            <li class="{{ currentMenu['map'] }}"><a ng-href="#!/mapa">Universidades</a></li>
            <li class="{{ currentMenu['methodology'] }}"><a ng-href="#!/metodologia">Metodología</a></li>
        </ul>
    </nav>
</div>

CSS

/* Menu hamburguesa */

@media only screen and (max-width: 768px) {
    * {text-decoration: none;
        transition: all 0.3s;
        transform: all 0.3s;
      
      }
      body {padding: 50px;}
      li {list-style: none;}
      
      .menu {
        display: inline-block;
        position: relative;
        z-index: 100;
        
        .btn {
          display: block;
          cursor: pointer;
          padding: 5%;
          
          
          .bar {
            width: 30px;
            height: 5px;
            background: #ffffff;
            margin-bottom: 5px;
          }
          .bar:last-child {margin-bottom: 0px;}
        }
        /* .bar:hover { 
            background: #F16984;}
         */
        nav {
          position: absolute;
          left: 10px;
          background-color:#231f20;
          border: 3px solid #231f20;
          visibility: hidden;
          opacity: 0;
          
          -webkit-transform: scale(0.7);
          
          a {
            font-family: 'Exo';
            color: #dfdfdf;
            padding: 5px 15px;
            display: block;
            border-bottom: 1px solid #ddd;
            white-space: nowrap;
            font-size: 20px;
          }

          li:first-child a {color: #F16984;}
          li:last-child a {border-bottom: 0px;}
          a:hover {color: #F16984;}

          
        }
        
        .menu_show {
          visibility: visible;
          opacity: 1;
          -webkit-transform: scale(1);
          
        }
      }
  }

原JavaScript

$(document).ready(function(){
  
  $('.menu .btn').on('click', function() {
    $('#nav').toggleClass('menu_show');
  });    
  
});

修改方案（添加点击外部关闭功能） #

修改JavaScript代码，通过监听document的点击事件判断点击区域，同时阻止汉堡按钮的事件冒泡避免冲突：

$(document).ready(function(){
  // 汉堡按钮切换菜单显隐
  $('.menu .btn').on('click', function(e) {
    // 阻止事件向上冒泡到document，避免刚打开菜单就触发关闭逻辑
    e.stopPropagation();
    $('#nav').toggleClass('menu_show');
  });    

  // 点击菜单容器外部时关闭菜单
  $(document).on('click', function(e) {
    // 检查点击目标是否不在.menu容器内，且当前菜单处于显示状态
    if (!$(e.target).closest('.menu').length && $('#nav').hasClass('menu_show')) {
      $('#nav').removeClass('menu_show');
    }
  });
});

逻辑说明 #

1. 阻止事件冒泡：在汉堡按钮的点击事件中添加e.stopPropagation()，防止点击按钮时事件传递到document，导致菜单刚切换显示就被关闭。
2. 外部点击判断：通过$(e.target).closest('.menu').length检测点击元素是否属于.menu容器的后代（包括容器本身）。如果不属于且菜单处于显示状态，就移除menu_show类关闭菜单。

内容的提问来源于stack exchange，提问作者Joel Bravo