使用JS的媒体查询时，下拉列表不会隐藏

Question

我使用javascript来隐藏我的小屏幕下拉列表。它曾经在使用像这样的媒体查询之前工作

@media screen and (max-width: 1009px) {
  .dropdown-content {
    display: none;
    position: absolute;
    top: 55px;
  }
  .show {
    display: block;
  }
  .dropbtn {
    text-decoration: none;
    background-color: #4CAF50;
    color: #4CAF50;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  }
  .dropdown {
    text-decoration: none;
    position: center;
    display: inline-block;
  }
}

点击外窗口时关闭下拉列表的java脚本是

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

但现在添加媒体查询时，这似乎不起作用。请给我一个答案。我甚至使用了jQuery，但即使这样也无法解决。这是媒体查询的问题吗？我该怎么办？