Vanilla JS-在元素外部切换类

Question

Like in topic. I search other way to do this, but it won't work good. After using button immediately function give me "removing" :/ Any lead to a good lead?

var button = document.querySelector(".menu-icon");
var menu = document.querySelector(".mymenu");

function drop(e){
  menu.classList.add("show");
  document.addEventListener("click", hide(e));
}
function hide(e){
  if(!menu.contains(e.target)) menu.classList.remove("show");
}
button.addEventListener("click", drop);

Answer 1

Well first of all, you need to parse the hide function into 'addEventListener', not call it, that will parse the return of the function (null), and call it immediately and not on click.

So it would look like this instead:

function drop(e) {
  menu.classList.add('show');
  document.addEventListener("click", hide); 
}