禁用/启用基于视口宽度的 JavaScript

Question

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

当页面加载大于 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, ...);