Javascript代码添加不应该在那里的东西

Question

我正在创建一个网站，我想要设置一个菜单，只显示某种方式时显示在某些px宽度。我稍后将更改代码以执行if语句来检查它是否是触摸屏。但是，现在我必须通过宽度来测试代码。然而，即使当我改变到更高的宽度后，它正确加载了一定的宽度，我仍然添加了我的标签和输入。 My codepen

我的javascript代码。

var mediaTab = window.matchMedia("(max-width: 1024px)"); 
 

 
    function addmenu() { 
 
    if (mediaTab) { 
 
     var menu = document.querySelector("#top-lvl-menu"); 
 
     var navBar = document.querySelector("nav"); 
 
     var navToggle = document.createElement("label"); 
 
     var navInput = document.createElement("input"); 
 

 
     navToggle.innerHTML = "☰ Menu"; 
 
     navToggle.className = "menu"; 
 
     navInput.id = "menu-Toggle"; 
 
     navInput.type = "checkbox"; 
 
     navToggle.appendChild(navInput); 
 

 
     navBar.insertBefore(navToggle, menu); 
 
     navToggle.appendChild(menu); 
 
    } 
 
    } 
 
    window.addEventListener("load", addmenu, false);

<nav> 
 
    <ul id="top-lvl-menu"> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
     <ul id="services-submenu"> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     <li><a href="#">Link</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    <li><a href="#">Link</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

从MDN window.matchMedia：

返回表示指定媒体查询字符串的解析结果的新MediaQueryList对象。

因此，无论窗口大小是否满足媒体查询，它都会返回一个对象。

幸运的是，对象是返回包含'匹配'属性。

尝试：

... 
if(mediaTab.matches){...} 

编辑：另外，该方法仅支持早在IE10。您可能需要考虑使用window.innerWidth，然后在if语句中进行比较。

var mediaTab = window.innerWidth; 
if(mediaTab < 1024){...}