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

我使用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');
      }
    }
  }
}

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

---

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

你能提供你的html吗？我不太明白，你目前的CSS媒体查询屏幕宽度高达1009px，但你正在尝试删除CSS中没有列出的.show CSS类。一种方法是添加一个CSS隐藏类，该类具有

.hide{display:none！important；}