Javascript代码添加了一些不应该存在的内容

Javascript code adding something that shouldnt be there

本文关键字：存在 不应该 代码 添加 Javascript      更新时间：2023-09-26

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

我的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>

从MDN窗口。matchMedia:

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

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

幸运的是，返回的对象包含一个"matches"属性。

尝试：

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

编辑：而且，这种方法只有在ie10之前才受支持。您可能需要考虑只使用window.innerWidth，然后在if语句中进行比较。

var mediaTab = window.innerWidth;
if(mediaTab < 1024){...}
相关文章：