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

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;
    }
}