Блог

Я столкнулся с небольшой проблемой с моим переключаемым меню. Анимация гамбургера работает нормально, и как только вы нажмете ссылку, она приведет вас в этот раздел моей страницы и удалит мой вспомогательный класс CSS «экран блокировки» — это скроет мое переполнение, так что вы не сможете прокручивать меню переключения. Однако, если вы хотите просмотреть меню, закройте его, не нажимая на пункт меню — класс «экран блокировки» остается примененным. Я немного новичок в JavaScript, нужно ли мне включать прослушиватель событий в состояние if/else для добавления новой переменной/функции, чтобы включить прокрутку, если после закрытия меню ссылка не нажата?

 
const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");

navToggle.addEventListener("click", () => {
  document.body.classList.toggle("nav-open");
  document.body.classList.add("lockscreen");
});

navLinks.forEach((link) => {
  link.addEventListener("click", () => {
    document.body.classList.remove("nav-open");
    document.body.classList.remove("lockscreen");
  });
});

 

Вы можете добавить прослушиватель событий в тело, чтобы любые щелчки за пределами меню удаляли «экран блокировки», или более сложным подходом было бы использовать if/else в функции прослушивателя, чтобы проверить, соответствует ли текущее событие.target = = = ‘someElement’

 
const navToggle = document.querySelector(".nav-toggle");
const navLinks = document.querySelectorAll(".nav__link");


navToggle.addEventListener("click", () => {
  document.body.classList.toggle("nav-open");
  document.body.classList.add("lockscreen");
});

navLinks.forEach((link) => {
  link.addEventListener("click", () => {
    document.body.classList.remove("nav-open");
    document.body.classList.remove("lockscreen");
  });
});

document.body.addEventListener("click", () => {
    document.body.classList.remove("lockscreen");
})
 

Следите за пузырями!
Подробнее о пропаганде, захвате и бурлении читайте здесь