javascript - 切换按钮不起作用。没有显示 : none; at first click

Question

我正在尝试用 js 做一个切换按钮，但是第一次点击它时它不起作用。由于 nav.display.display 没有值，尽管它在 CSS 代码中有 display: none;。

我想应该是关于我如何使用 onload 的问题...就好像 css 还没有加载一样。但我读过 window.onload 等待所有加载。所以我真的不知道发生了什么。

这就是我在实际代码中加载它的方式(在处理加载的 jsfiddle 之外)

window.onload = function() {
    var el = document.querySelector('.nav-toggle');
    el.addEventListener("click", toggleNav, false);
};

请不要使用 jQuery。

这是 jsfiddle:

function toggleNav() {
  var nav = document.querySelector('#navigation');
  alert(nav.style.display);
  
  if (nav.style.display == 'none') {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
}
var el = document.querySelector('.nav-toggle');
el.addEventListener("click", toggleNav, false);

#navigation {
    display: none;
}

<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>

Answer 1

感谢@Aliester 的评论，我明白了:)

function toggleNav() {
  var nav = document.getElementById('navigation');
  
  if (nav.offsetWidth == 0 && nav.offsetHeight == 0) {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
}
var el = document.querySelector('.nav-toggle');
el.addEventListener("click", toggleNav, false);

#navigation {
    display: none;
}

<button class="nav-toggle">Toggle</button>
<nav id="navigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul>
</nav>