Question

当窗口大小超过1000px时，我想从showMenu元素和#menu ul标记中删除类#style2。

我的代码：

$(function() {
  if (window.screen.width > 1000) {
    $("#menu ul").removeClass("showMenu");
    $("#menuicon").removeClass("active");
    $("#style2").remove();
  }
});

我不知道为什么它会立即删除所有内容，而不是在屏幕调整为1001px之后......

Answer 1

因为它在加载后检查屏幕的宽度仅。要在每次调整屏幕大小时使其工作，必须进入$(window).resize()：

更新：您需要与window.innerWidth核对window.screen.width。

$(function() {
  $(window).resize(function () {
    if (window.innerWidth > 1000) {
      $("#menu ul").removeClass("showMenu");
      $("#menuicon").removeClass("active");
      $("#style2").remove();
    }
  });
});

我也相信一旦它变得正常，你想将它还原：

$(function() {
  $(window).resize(function () {
    if (window.innerWidth > 1000) {
      $("#menu ul").removeClass("showMenu");
      $("#menuicon").removeClass("active");
      $("#style2").remove();
    } else {
      $("#menu ul").addClass("showMenu");
      $("#menuicon").addClass("active");
      $("#style2").remove(); // I don't know how to do this! `:P`
    }
  });
});

调整窗口宽度时删除类和样式标记

1 个答案: