根据视口宽度禁用/启用javascript

Question

我创建了一个导航栏，需要400px但低于400px的javascript我不需要它。

当页面加载大于400px，然后调整大小以下javascript仍然会导致不良影响。 （同样适用于加载小于400px的页面，然后将其大小调整为大于）。 https://jsfiddle.net/abp1rwhp/4/

我正在使用

if(screen.width < 400)

正如我所解释的那样直到用户调整窗口大小。有谁知道我可以解决我的问题的方法？

Answer 1

这应该是诀窍，其中.nav是导航的css选择器

    var showHideMyNav = function() {
      if(window.outerWidth < 400) {
        var nav = document.querySelector(".nav");
        nav.style.visibility = "hidden"; // $('#nav-bar').hide();
      } else {
        nav.style.visibility = "visible"; // $('#nav-bar').show();
      }
    };
    window.addEventListener('resize', showHideMyNav); // $(window).on("resize, ...);