代码之家 › 专栏 › 技术社区 › JAT86

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

onload-event toggle css html javascript

0

JAT86 · 技术社区 · 6 年前

我有一个 <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>

如何使其在重新加载页面时也隐藏菜单?

1 回复 | 直到 6 年前

1

0

Delvian 6 年前

您最好使用CSS媒体查询。举个例子:

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