通过jQuery选择器将其删除后，类属性仍然会被应用

Question

我有一个带有一个下拉菜单的水平导航栏。在没有触摸的大屏幕上，下拉菜单将在：hover上打开。在触摸式屏幕上，单击即会打开。在这两种情况下，dropdown-content的显示属性均为“ absolute”，而其容器设置为“ relative”。

在较小的屏幕（<1220px）上，将显示一个菜单图标，而不是我用于水平导航栏的文本链接。单击后，导航菜单将垂直打开。为此，dropdown-content的显示属性为“ static”。

问题在于，在大于1220px的屏幕上，它仍将“静态”应用于导航栏，使内容“跳转”。

我尝试了其他文章中不同的父子选择器和建议，但是我无法让它们为我工作。我在做什么错了？

这是我的HTML：

<nav id="main-nav">
          <div class="burger-nav"></div>
          <ul>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
            <div class="dropdown">
              <li class="dropbtn">gallery</li>
              <div class="dropdown-content">
                <li><a href="galerie1.html">gallery 1</a></li>
                <li><a href="galerie-2.html">gallery 2</a></li>
              </div>
            </div>
            <li><a href="#">link</a></li>
            <li><a href="#">link</a></li>
          </ul>
        </nav>

CSS：

/* container for the dropdown menu */
.dropdown {
  position: relative;
  display: inline-block;
}

/* dropdown menu items */
 .dropdown-content {
  opacity: 0;
  position: absolute;
  width: auto;
  height: auto;
}

/* dropdown items show on hover */
.dropdown:hover .dropdown-content {
  opacity: 1;
}

/*mobile & touch */
/* set positions */
.static {
  position: static;
}
.position-fixed {
  position: fixed;
}

/* show dropdown items on click */
.visible {
  opacity: 1;
}

jQuery：

  $(window).on('resize', function() {
    //always collapse dropdown on screen resize
    $(".dropdown-content").removeClass("visible");
    $(".dropdown-content").removeClass("static");
  });

  //---------toggle dropdown menu on touch screens---------
    $(".dropbtn").on("click", function() {
      $(".dropdown-content").toggleClass("visible");

      if($(window).width() > "1220px") {
        $(".dropdown-content").removeClass("static");
      } else {
        $(".dropdown-content").toggleClass("static");
      }
    });