Скрипт скрывает блок не так как нужно. В чем ошибка?

Question

[SkySeven]

В общем написал скрипт на открытие/закрытие меню. Скрипт работает, но только после 2 нажатия на иконку, при этом после этой процедуры все работает как надо т.е. 1 раз нажимаю - блок скрывается/раскрывается.

var menu = document.getElementById('menu');




function menuDown() {
	if (menu.style.display === 'none') {
		menu.style.display = 'flex';

	}
	else  {
		menu.style.display = 'none';
	}
		}

Answer 1

[DanKud]

Потому что JS читает атрибут style непосредственно из тэга. Описание стилей в данном случае значения не имеет. Варианта три:

1. Добавляете непосредственно атрибут style в тэг

<div id="menu" style="display: none"></div>

2. Получаете свойство стиля через getComputedStyle()

function menuDown() {
  menu.style.display = getComputedStyle(menu).display;
  if (menu.style.display === 'none') {
  .....

3. Добавляете условие в скрипт

function menuDown() {
  if (menu.style.display === 'none' || !menu.style.display) {
  .....