Javascript 如果（！event.target.matches）不匹配多个divs-Js反转逻辑

我有一个输入字段（.dropbtn），选中时显示下拉列表（.dropdown-content2）。我使用以下代码在单击输入字段以外的任何内容时关闭下拉列表：

window.onclick = function(event) {
...
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

window.onclick=函数（事件）{
...
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“dropdown-content2”）；
var i；
对于（i=0；i

我试图使下拉菜单关闭，如果除了输入字段或下拉菜单本身被点击。单击下拉列表时，我想添加一个类，如果它已经包含这个类，请关闭它

这样，下拉列表在单击两次后关闭

我很难弄清楚反转（！）是如何工作的，我想知道“elseif”在这个场景中是否有效

*编辑：我尝试使用以下方法添加另一个事件目标：

  if (!event.target.matches('.dropbtn') && !event.target.matches('.dropdown-content2')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

if（！event.target.matches（'.dropbtn'）&&！event.target.matches（'.dropdown-content2'））{
var dropdowns=document.getElementsByClassName（“dropdown-content2”）；
var i；
对于（i=0；i

---

我也试过用！event.target.closest（）而不是.matches（）

使用event.stopPropagation成功

document.getElementById("myDropdown5").addEventListener('click',function(event){
    event.stopPropagation();
});