Как скрыть элемент при клике?

Question

[Олег Морев]

Добрый день, подскажите решение на нативном JS.
Суть вопроса в меню есть часть которая выезжает и ей присваивается класс .show
Надо чтобы при клике за пределам этого меню удалялся класс .show

Может пригодится:)

toggleMenu() {

    var menuButton = document.getElementById('menuButton');
    var menuOverlay = document.getElementById('menuOverlay');  

    menuButton.classList.toggle('show');
    menuOverlay.classList.toggle('show');

}

Comments

[Andrew]

Посмотрите как модалки реализованы в boostrap, fancybox и т.п.
Делаете слой, который выезжает за меню(то есть занимает всё место в браузере), с меньшим z-index(чем у меню), и при клике на него - убирается .show и этот слой тоже прячется.

Answer 1

[Олег Морев]

Решил задачу:) вдруг кому пригодится

document.addEventListener('DOMContentLoaded', function() {

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

document.addEventListener("click", function() { 
menuOverlay.classList.remove('show');
});

menuOverlay.addEventListener("click", function(e) { 
e.stopPropagation();
});

});

Answer 2

[Don2Quixote]

Не помню, как делать это на чистом js, но посоветую тебе познакомиться с jQuery )
Там всё просто:
Что бы спрятать элемент:
$("#id или .class элемента").hide();
Что бы показать:
$("#id или .class элемента").show();

Comments

[Олег Морев]

Я с ним знаком к сожалению)

[Don2Quixote]

Олег Морев, почему к сожалению?)