调整 window 宽度时删除 class 和样式标签

Question

当 window 尺寸大于 1000 像素时，我想从 #menu ul 元素和 #style2 标签中删除 class showMenu。

我的代码：

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

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

Answer 1

因为它会在加载后只检查一次屏幕宽度。要在每次调整屏幕大小时使这项工作，必须进入 $(window).resize():

Update: You need to check with window.innerWidth not with 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`
    }
  });
});

调整 window 宽度时删除 class 和样式标签

Remove class and style tag when window width is resized

html

css

jquery

window

screen-resolution