自适应菜单在必要时不会隐藏

Question

如果屏幕或设备宽度较小，那么我放了一个按钮来打开菜单。（确切地说是 js put 而不是 .因此，当我在自适应菜单打开时使宽度增加（使用开发工具谷歌浏览器）时，我遇到了一个问题 - 所以我有2个菜单栏。也许您可以提供更好的方法在小屏幕上创建这样的菜单。900pxdisplay:inline;display:none;900pxwindow.onload = function() {  let headerid = document.getElementById("header-menu");  let menuStyle = getComputedStyle(headerid);  document.getElementById("menu").onclick = function() {    if (menuStyle.display == "none") {      headerid.style.display = "inline";    } else {      headerid.style.display = "none";    }  }}

Answer 1

为了防止这样的事情而不是使用，请尝试为窗口大小调整添加事件侦听器（因此每当调整窗口大小时，它将运行脚本），如下所示：window.onload

window.addEventListener('resize', function(event){

  let headerid = document.getElementById("header-menu");

  let menuStyle = getComputedStyle(headerid);

  document.getElementById("menu").onclick = function () {

    if (menuStyle.display == "none") {

      headerid.style.display = "inline";

    } else {

      headerid.style.display = "none";

    }

  };

});