Как скрыть меню после нажатия на ссылку?

Question

[Сергей Романюк]

Есть меню на сайте, при клике на любую из ссылок оно должно исчезать. Как реализовать на JS? С Jquery всё выходило, а с чистым JS не могу это реализовать

Вот код:

let
	btnMenu = document.getElementById('menuBtn')
	menuHeader = document.getElementById('headerMenu')
	itemMenu = document.getElementsByClassName('header-menu__link')
	
btnMenu.onclick = function() {
	if (menuHeader.style.display === 'flex') {
	   menuHeader.style.display = 'none'
	} else {
	   menuHeader.style.display = 'flex'
	}
	this.classList.toggle('menu-btn_active')
}

Answer 1

[Пашенька]

1. Не забываем в конце строки , и ;
2. Я бы рекомендовал геттить значения ЦСС пропертиз, используя вычисленное значение getComputedStyle(elem).display
3. Без разметки не всё так очевидно. Вы же, вроде как, хотите, чтобы на itemMenu меню скрывалось, а вешаете слушатель на btnMenu. А их несколько, а именно целая HTMLCollection. Так что нужно по ним фором идти:

for (let i = 0; i < itemMenu.length; i++) {
	itemMenu[i].onclick = function() {
		if (getComputedStyle(menuHeader).display === 'flex') {
			menuHeader.style.display = 'none';
		} else {
			menuHeader.style.display = 'flex';
		}
		this.classList.toggle('menu-btn_active');
	}
}

Comments

[Сергей Романюк]

, и ; в ES6 вроде не обязательно ставить, на сколько я знаю, а так, спасибо большое вам

[Пашенька]

Сергей Романюк, Оно то всегда необязательно было. Однако, если вы видели некоторый чужой код, то должны были обратить внимание, что все зачем-то всёравно ставят и это должно было навести на некоторые мысли. Отсутствие точек с запятой будет работать до определённого момента, пока не встретится некоторая конструкция, вот потом будет неприятно.

[Сергей Романюк]

like-a-boss, ага, понял, окей. Спасибо еще раз;)