Javascript 单击“外部”时无法隐藏导航下拉列表

我有一个问题，当我在下拉菜单外单击时，我无法删除类。这是我的密码笔：

---

您可以通过外部单击删除类“活动”：

window.addEventListener('click', function(e) {

  var els = document.getElementsByClassName('dropdown');

  for (var i = 0; i < els.length; i++) {
    if (els[i].contains(e.target)) {
      // Clicked on dropdown
    } else {
      // Clicked outside the dropdown
      els[i].classList.remove('active');
    }
  }
});

以下代码将导致每次单击

main

-div关闭下拉列表：

document.getElementById("main").addEventListener("click", function(event) {
    getNavItem.forEach(item => {
        item.classList.remove('active')
    })
})

只要把它放在你的代码下面，从上面删除这个

// Remove when click outside
document.addEventListener("click", function(event) {
    if(event.target.tagName == 'BODY') {
        this.classList.remove('active');
    }
})

---

从代码中。

为什么要在循环中绑定body click事件？您正在添加大量事件fyi，要在触摸设备上工作，您还需要收听

touchend

事件，因为非交互元素（例如链接、按钮、输入）不会触发点击事件。您可以使用窗口中的“ontouchend”测试支持

// Remove when click outside
document.addEventListener("click", function(event) {
    if(event.target.tagName == 'BODY') {
        this.classList.remove('active');
    }
})