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); 
}