javascript - 单击菜单外部 div 时菜单导航接近

Question

我尝试使用汉堡包图标关闭和打开菜单导航 View ，它工作正常。我尝试菜单外部 div 单击，菜单关闭但我再次单击 humburger 菜单它没有打开(工作)，请指导，如何解决这个问题，抱歉英语不好。提前致谢。

// Humburger menu working fine
function menushow() {
  if (document.getElementById("r_menu").className == "h_menu") {
    document.getElementById("r_menu").className = "s_menu";
    document.getElementById("menu_grp").className = "menu_grpa";
  } else {
    document.getElementById("r_menu").className = "h_menu";
    document.getElementById("menu_grp").className = "menu_grp";
  }
}

// menu outer click
document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('r_menu1');
  if (!container.contains(e.target)) {
    document.getElementById("r_menu").className = "h_menu";
  }
}.bind(this));

.w_100 {
  width: 400px;
  height: 300px;
  border: 1px solid red;
}

.humb {
  background: cyan;
  width: 80px;
  height: 25px;
}

.h_menu {
  height: 0;
  width: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.3s;
}

.s_menu {
  width: 100px;
  height: 200px;
  visibility: visible;
  overflow: hidden;
  transition: all 0.3s;
  z-index: 555;
}

ul.r_menu li {
  border: 1px solid red;
  padding: 5px 5px;
}

<div id="menu" class="w_100">
  <p onclick="menushow()" class="humb">Menu Click</p>
  <div id="r_menu" class="h_menu">
    <ul id="r_menu1" class="r_menu">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
</div>

在没有菜单外点击功能的情况下，菜单打开和关闭工作正常，我需要有外点击功能和菜单点击打开和关闭功能。

Answer 1

请说清楚你想要什么？该列表在单击“菜单单击”时打开，在“w_100”div 中的其他任何地方单击时正常关闭。