单击正文或滑动幻灯片时，侧边栏菜单关闭（宽度：0）

Question

我正在尝试为移动版本制作垂直幻灯片菜单。单击（Openbtn）（Closebtn）之类的特定按钮时，此侧面菜单会打开和关闭；单击body标签中的任意位置（包括菜单栏）时，此侧面菜单会关闭。

当我在菜单栏（侧面菜单）外部单击主体时，需要关闭侧面菜单的javascript代码。另外，如果在滑动菜单栏（侧面菜单）时可能会关闭，也会很有帮助。

以下是我的示例供您参考：

function openNav() {
  console.log("open");
  document.getElementById("toggle_menu").style.width = "250px";
}

function closeNav() {
  document.getElementById("toggle_menu").style.width = "0";
}

document.addEventListener("click", function(){
  if( parseInt( $('#toggle_menu').css('width') ) > 0 ){
    document.getElementById("toggle_menu").style.width = "0";
  }
});


// For Child dropdown menu
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

.toggle_menu {display:block; width:250px; top:0px; height:100%; background-color:#fff; box-shadow: 0 5px 5px rgba(0,0,0,.2);position: fixed; overflow-x: hidden; transition: 0.5s; z-index:1000;}
.title {width:100%; height:80px;}
.toggle_menu ul {list-style:none; margin:0; padding:0;}
.toggle_menu ul li {width:100%; height:40px; cursor:pointer;}
.toggle_menu ul li a {text-decoration:none; color: #666666; font-size:14px; display:block; padding: 10px 0px 0 50px; font-size: 14px; font-family:sans-serif;}
.toggle_menu ul li .sub-arrow:after { content:'\203A'; font-size:24px; color:#666666; float:right; margin-top:-20px; margin-right:30px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }
.toggle_menu ul li:hover {background-color:#E8E6FF;}
.toggle_menu ul .dropdown-container {display:none; background-color: #E2E1FB;} 
.toggle_menu ul .dropdown-container a:before{ content:'\203A'; font-size: 15px; margin-right:10px; color: #666666; }

.closebtn {
  position: absolute;
  height:40px;
  width:50px;
  color:#000;
  border-radius:50%;
  text-align:center;
  padding-top:10px;
  border:6px solid #307DFE;
  font-size:24px;
  font-family: Arial, Helvetica, sans-serif;
  background: #70A9FE;
  right:10px;
  top:10px;
}
.closebtn:hover {border:6px solid #FF9900;}		

<span id="menu_bar" onClick="openNav()">Menu</span>

<!-- Slide Menu -->
<div class="toggle_menu" id="toggle_menu">
	    <div class="title"><a href="javascript:void(0)" class="closebtn" onClick="closeNav()">X</a> </div> 
      <div class="sidenav">
        <ul>
          <li><a href="#">Home</a></li>
          <li class="dropdown-btn"><a href="#">Men's</a><span class="sub-arrow"></span></li>
            <ul class="dropdown-container">
              <li><a href="">Traditional Wear</a></li>
              <li><a href="">Top Wear</a></li>
              <li><a href="">Bottom Wear</a></li>
              <li><a href="">Footwear</a></li>
              <li><a href="">Bags</a></li>
              <li><a href="">Accessories</a></li>
             </ul>
          <li class="dropdown-btn"><a href="#">Women's</a><span class="sub-arrow"></span></li>
             <ul class="dropdown-container">
                <li><a href="">Traditional Wear</a></li>
                <li><a href="">Westen Wear</a></li>
                <li><a href="">Footwear</a></li>
                <li><a href="">Lingerie</a></li>
                <li><a href="">Bages</a></li>
                <li><a href="">Jewellery</a></li>
                <li><a href="">Accessories</a></li>
             </ul>
        </ul>
      </div>
</div>