Vanilla JS - 在元素之外切换类

Question

喜欢主题。我搜索其他方式来做到这一点，但它不会很好。使用按钮后立即功能给我“删除”：/任何导致良好的领导？

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

首先，您需要将hide函数解析为'addEventListener'，而不是调用它，它将解析函数的返回值（null），并立即调用它而不是单击。

所以它看起来像这样：

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