根据页面重新加载时的屏幕宽度切换菜单的可见性

Question

我有一个带有链接的<ul>菜单，并且想添加一些功能，该功能根据屏幕宽度来切换菜单的可见性（即，它应该在小于767px的屏幕上隐藏菜单）。我尝试过此代码，当调整窗口大小时，此代码似乎起作用。但是在页面重新加载时，它不会：

function toggleVisibility(i) {
  window.innerWidth < 767 && (i.style.display = "none")
}

<ul onload="toggleVisibility(this)">
  <li><a href='link1.html'>Item 1</a></li>
  <li><a href='link2.html'>Item 2</a></li>
  <li><a href='link3.html'>Item 3</a></li>
  <li><a href='link4.html'>Item 4</a></li>
  <li><a href='link5.html'>Item 5</a></li>
</ul>

如何在重新加载页面时隐藏菜单？

Answer 1

为此，您最好使用CSS媒体查询。 一个例子：

/* any CSS declared inside will only apply when the window width is 766 or less */
@media (max-width: 766px)
{
    ul
    {
        display: none;
    }
}