Как сделать на чистом JS, чтобы при нажатии на div скрывало ul список и при повторном нажатии возвращало?

Question

[Евгений Стек]

Есть иконка меню, то есть 2 не связанных между собой элемента div и ul, так вот, нужно чтобы при нажатии на div - скрывало ul, а при повторном нажатии возвращало на тоже место. Свои попытки я по ссылке оставил, у меня почему-то не работает, был бы рад подробному объяснению почему так. Заранее спасибо

https://jsfiddle.net/Gared_Bang/a6djfckx/

Comments

[Karponter]

hiddenMenu.className = '.hiddenMenu hidden'
Здесь не нужен селектор (точка)

[Karponter]

Та и вообще, нужно делать одну функцию клика и просто при клике изменять состояние ul. Скрыто -- показать, показано -- скрыть. Проверяете значение style.display и меняете.

[Евгений Стек]

Karponter а можно это в формате кода? а то я не совсем понимаю, как проверять

Answer 1

[Stalker_RED]

Во первых, событие называется не onclick а просто click

Во вторых, нужно проверять текущее состояние, иначе все четыре(!?) обработчика на вашем меню сработают сразу, друг за другом. И меню так и останется видимым.

https://jsfiddle.net/a6djfckx/1/

Comments

[Евгений Стек]

4 потому что это были как бы 2 варианта моих. Спасибо, всегда выручаете. А писал onclick потому что везде на сайте www.w3schools.com/js/js_htmldom_events.asp так пишут, вот и я стал

[Евгений Стек]

Stalker_RED А как сделать, чтобы во время того, как список закрыт цвет "бургера" был красный, а при открытии снова становился белым?

[Stalker_RED]

Евгений Стек: В аттрибуты html тегов действительно пишется onclick, onchange и т.п. Но при этом сами события не имеют префикса 'on'.

А как сделать, чтобы во время того, как список закрыт цвет "бургера" был красный, а при открытии снова становился белым?

Менять еще и класс .menu

[Евгений Стек]

Stalker_RED: Это то я понимаю, но не понимаю, как ко всему этому еще и эти дивы добавить, вы мне как-то писали решение почти такой же задачи https://jsfiddle.net/tke4bx2w/ но я вот пытаюсь совместить эти 2 кода и не понимаю, что не так

(function(){
var menu = document.querySelector('.menu')
var elements = document.querySelectorAll('.menu > div')
var hiddenMenu = document.querySelector('.hiddenMenu')
var toggleMenu = function(){
var isHidden = (hiddenMenu.style.display == 'none')
hiddenMenu.style.display = isHidden ? 'block' : 'none'
elements.style.backgroundColor = 'red'
}
menu.addEventListener('click', toggleMenu)
})()

[Stalker_RED]

Евгений Стек: Нужно не "совмещать коды" а учить язык.
видите непонятную строчку - смотрите в учебник, в гугл или спрашиваете. А тупое копирование не научит ничему хорошему.

[Stalker_RED]

Евгений Стек:
Добавил правило .menu.hilight в css (строка #60)
Добавил строку #7 в скрипт
https://jsfiddle.net/a6djfckx/2/

[Евгений Стек]

Stalker_RED: не обо всем же узнаешь сразу, спасибо:)