单击打开菜单单击 div 以关闭

Question

我有一个菜单，我希望它在我从下拉菜单中单击此文本时打开，我希望它在鼠标单击其他任何地方时关闭。

var ignoreClickOnMeElement = document.getElementById('status_menu');
document.addEventListener('click', function(event) {
  var isClickInsideElement = ignoreClickOnMeElement.contains(event.target);
  if (!isClickInsideElement) {
    status_menu.classList.remove("status-menu");
    status_menu.classList.add("nostatus-menu");
  }
});

.avatar {
  height: 7vh;
  width: 7vh;
  background: url('../images/blankprofilepicture.png');
  background-size: cover;
  border-radius: 100%;
}

.avatar img {
  width: 7vh;
  border-radius: 100%;
}

.dropdown {
  z-index: 1;
  height: 7vh;
  width: 7vh;
  float: right;
  margin-top: 1vh;
  margin-right: 3vw;
  position: relative;
}

.avatar-dropdown {
  display: none;
  position: absolute;
  padding-top: 0.5%;
}

.avatar-dropdown p {
  cursor: pointer;
  padding: 0.5vw 1vw;
  font-family: "Ubuntu", sans-serif;
  color: black;
  text-decoration: none;
  display: block;
  font-size: 1em;
  text-align: center;
  background-color: white;
  margin: 0;
}

.avatar-dropdown p:hover {
  background-color: #b5b5b5;
}

.dropdown:hover .avatar-dropdown {
  display: block;
}

<header id="header">
  <h1>DEVIE</h1>
  <div class="dropdown" id="dropdown">
    <div class="avatar"></div>
    <div class="online-offline"></div>
    <div id="status_menu">
      <div id="online-div">
      </div>
      <div id="offline-div">
      </div>
    </div>
    <div class="avatar-dropdown" id="avatar-dropdown">
      <p onclick="status_menu();">Change status</p>
      <p onclick="window.location.href='profile.php';">Profile</p>
      <p onclick="window.location.href='friends.php';">Friends</p>
      <p onclick="logout();">Logout</p>
    </div>
  </div>
</header>

但无法使其工作并在 div 关闭后删除事件侦听器。 请帮忙，谢谢！