切换按钮不起作用。没有显示：无;第一次点击

Question

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

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

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

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

请不要jQuery。

这里是jsfiddle：

＆＃13;

＆＃13;

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

＆＃13;

#navigation {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

在您的#navigation上添加Disply：none，希望这个有效。

＆＃13;

＆＃13;

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

＆＃13;

#navigation {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过getComputedStyle()代替style

访问样式

＆＃13;

＆＃13;

var btn = document.querySelector('.nav-toggle'),
    nav = document.getElementById('navigation');
    
btn.addEventListener('click', function (e) {
  e.preventDefault()
  if (window.getComputedStyle(nav, null).display == 'none') {
    nav.style.display = 'flex';
  } else {
    nav.style.display = 'none';
  }
});

＆＃13;

#navigation {
    display: none;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;