javascript - 单击外部以关闭下拉头像菜单

Question

我有这个头像下拉菜单，你必须点击头像才能关闭菜单，但我希望能够点击页面上的任意位置来关闭菜单。任何帮助将不胜感激。

下面是html和javasript

<div class="user-menu-wrap">
            <a  class="mini-photo-wrapper" href="page.html" onclick="return false" style="cursor:pointer;"><img src="/images/default_avatar.png" /></a>

  <div class="menu-container">
    <ul class="user-menu" style="list-style:none;">
      <li class="user-menu__item"><a class="user-menu-link" href="/member.php">Profile</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/private.php">Messages</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/friends">Friends</a></li>
      <li class="user-menu__item"><a class="user-menu-link" href="/view-alerts">Alerts</a></li>

    </ul>
  </div>

    document.querySelector('.mini-photo-wrapper').addEventListener('click', function() {
  document.querySelector('.menu-container').classList.toggle('active');
});

Answer 1

window.onload = function(){
  var divToHide = document.getElementById('divToHide');
  document.onclick = function(e){
    if(e.target.id !== 'divToHide'){
      document.querySelector('.menu-container').classList.remove('active');
    }
  };
};

我几乎是从字面上复制粘贴这个。如果页面上只有一个元素，请像本例中那样优先使用 id 而不是 class。