Как реализовать закрытие при клике на фон и заблокировать скролл?

Question

[Kardamon_mchl]

Есть худо-бедно написанный код после попыток кое-как все функции соединить воедино. Выпадающее и закрывающееся многоуровневое меню по клику на кнопку с затемнением фона с помощью отдельного дива с классом.

Пробовал внедрить сюда код с функцией закрытия по клику на фон и блокирования скролла, но все попытки были тщетны. Добавляю функцию закрытия по клику вне элемента, меню закрывается, но открывается только после двух кликов по кнопке из-за проверки состояния в начале кода и исправить как-то у меня не получается. Прошу помощи у вас, дорогие форумчане. В js. jquery не силен, самоучка.

https://codepen.io/kardamon_mchl/pen/rNdmwem

Comments

[Kardamon_mchl]

Получилось правильно прописать закрытие по клику вне объекта: https://codepen.io/kardamon_mchl/pen/rNdmwem

Но при закрытии при клике вне объекта мне нужно, что бы все уровни скрывались так, же, как и при закрытии по клике по самой кнопке, как возможно такое исправить?

Answer 1

[Иван]

Ух.. Код немного избыточен.
Как я понял, у вас есть кнопка, которая открывает меню. Необходимо по клику открывать меню, блокировать скролл документа, плюс чтобы темнел фон. А при клике вне объекта меню - закрывалось меню, исчезал фон, скролл появлялся.

1. Как заблокировать скролл? Вешать на body - overflow: hidden при клике на кнопку.
2. Закрытие при клике вне меню. (загуглил, автор https://misha.agency/javascript/klik-vne-elementa.html)

jQuery(function($){
	$(document).mouseup( function(e){ // событие клика по веб-документу
		var div = $( "#popup" ); // тут указываем ID элемента
		if ( !div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0 ) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

Comments

[Kardamon_mchl]

Такой способ я пробовал внедрить самым первым, и он работал, из-за проверки состояния элемента в начала кода (closeAll) что нужно для того, что бы при закрытии самого меню, все остальные уровни закрывались, функция ломается и далее либо меню с затемнением открываются по очереди, либо открываются только после двух кликов

[Иван]

Kardamon_mchl, Kardamon_mchl, так просто при клике (закрытии меню) удаляйте класс открытия всех внутренних элементов) и тогда все будет закрываться вместе с закрытием меню

Удалось решить что-то?

[Kardamon_mchl]

Иван, да, я переписал функцию, где убрал проверку состояния, которая каждый раз менялась и прописал, что при наличии класса active у блока, что бы он удалялся и тогда удалось вписать функцию из вашего сообщения выше