问在屏幕任意位置单击“退出”时如何隐藏下拉菜单

EN

$(document).on('click', function(e) {
    const dropdown = $('.dropdown');
    if(!$.contains(dropdown, e.target) {
        // Close dropdown
        $(dropdown).toggleClass('hidden');
    }
});

var $nav = $('.greedy-nav');
var $btn = $('.greedy-nav button');
var $vlinks = $('.greedy-nav .visible-links');
var $hlinks = $('.greedy-nav .hidden-links');
var breaks = [];

function updateNav() {
  var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() -
    $btn.width() - 30;
  if ($vlinks.width() > availableSpace) {
    breaks.push($vlinks.width());
    $vlinks.children().last().prependTo($hlinks);
    if ($btn.hasClass('hidden')) {
      $btn.removeClass('hidden');
    }
  } else {
    if (availableSpace > breaks[breaks.length - 1]) {
      $hlinks.children().first().appendTo($vlinks);
      breaks.pop();
    }
    if (breaks.length < 1) {
      $btn.addClass('hidden');
      $hlinks.addClass('hidden');
    }
  }
  $btn.attr("count", breaks.length);
  if ($vlinks.width() > availableSpace) {
    //updateNav();
  }
}
$(window).resize(function() {
  //updateNav();
});

$btn.on('click', function(e) {
  e.stopPropagation();
  $hlinks.toggleClass("hidden");
});

updateNav();

$(document).on('click', function(e) {
  // Check if the dropdown is already hidden
  // Check if the clicked target exists in the hidden dropdown
  // Check if the clicked target exists in the visible dropdown
  // If none are true, then hide the dropdown
  if (!$($hlinks).hasClass('hidden') &&
    !$.contains($hlinks[0], e.target) &&
    !$.contains($vlinks[0], e.target)) {
    $($hlinks).addClass('hidden');
  }
});

.hidden {
  display: none;
}

.visible-links {
  background: #ededed;
}

.hidden-links {
  background: #222;
}

.hidden-links a {
  color: #FFF;
}

#shouldPin {
  padding-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="shouldPin">
  <div class="ItemListForMenu_shouldPin" id="CategoriesList">
    <div class="MenuCategoriesList_categoriesSection">
      <nav class='greedy-nav'>
        <button id="mybtn">More</button>
        <ul id="mainNav" class='visible-links'>
          <li>Appetizers</li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
          <li><a href='' class="MainCategory">Appetizers</a></li>
          <li><a href='' class="MainCategory">Soups</a></li>
          <li><a href='' class="MainCategory">Salads</a></li>
          <li><a href='' class="MainCategory">Sashimi or Sushi</a></li>
        </ul>
        <ul id="menu_dropdown" class='hidden-links hidden'></ul>
      </nav>
    </div>
  </div>
</div>