如何隐藏我的滑动边导航，当我点击其他？

<nav id="slide-menu">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
  </ul>
</nav>

#slide-menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background-color: #f1f1f1;
  transition: left 0.3s ease;
}

#slide-menu.show {
  left: 0;
}

#slide-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#slide-menu li {
  padding: 10px;
}

#slide-menu li a {
  text-decoration: none;
  color: #333;
}

#slide-menu li a:hover {
  color: #000;
}

document.addEventListener('click', function(event) {
  var slideMenu = document.getElementById('slide-menu');
  var targetElement = event.target;

  if (!slideMenu.contains(targetElement)) {
    slideMenu.classList.remove('show');
  }
});