Codepen.io/westerovs/pen/YzWJmoE?editors=1011
по нажатию на "тело" навигации - оно выезжает
по нажатию на любую другую область - заезжает.
Пока оно не выедет - блокируются случайные нажатия на элементы.
Пока оно заезжает - блокируются случайные нажатия на элементы.
ссылка на codepen: codepen.io/westerovs/pen/YzWJmoE?editors=1011
if (body.classList.contains('show-menu')) {
body.classList.remove('show-menu')
}
Заменить на body.classList.remove('show-menu') без if
Оно не выдает ошибку, если класса не было.
___
Во-первых
if (a) return
else if (b) return
else if (c) return
Бессмысленная конструкция, и заменяется на
if (a || b || c) return;
Во-вторых, e.target.className === 'nav__item' вот так не надо... в будущем, желание добавить новый класс по другим причинам, не должно ломать старый код. Такую проверку делают как минимум через регулярное выражение, а лучше через classList.contains
Вся проверка сокращается до:
if ([nav, navList].includes(e.target) || e.target.classList.contains("nav__item")) return;
___
«лучше использовать ооп» (с) del
Имхо, пока функций меньше десятка и больше точно не предвидится, функции вполне комфортно могут жить без объектов) ООП - способ управления большим кодом. Не обязательно пытаться везде пропихнуть.
Убрать имена на вроде nav, body ...из глобальной области видимости. Если кто то захочет использовать такое же имя в другом коде все сломается. Обычно это делают с помощью анонимной самовызывающейся функции
+function(){ ...код приложения ...}();
Такая же ситуация с отдельно висящими функциями лучше использовать ооп и сделать их свойствами какого либо объекта.
Так же не стоит изменять стилевые свойства из JS лучше создать отдельные классы CSS а в JS переключать эти классы. т. е. придерживаться правила "котлеты отдельно мухи отдельно".
⇢