dzheraff
@dzheraff

Почему не закрывается мобильное меню при клике на кнопку «Меню»?

Приветствую, друзья!

Пытаюсь сделать простое адаптивное меню, которое потом можно было бы использовать в различных проектах.

Я пытался реализовать закрытие меню, по клику по пустому пространству (изначально закрывалось только при клике на блок "Мобильное меню"). После реализации данной функции появилась проблема, теперь при открытом меню, если нажать на блок "Мобильное меню", пункты меню сначала закрываются, но потом сразу же открываются.

Логику проблемы я понял. У меня происходит конфликт команд. В одной команде клик говорит - закрой, а в другой - открой. Только вот не пойму как эту проблему решить. Суть в том, что меню должно закрываться и при клике по блоку "Мобильное меню" (в будущем блок заменится на что-то более приличное) и при клике по пустому пространству.

И да, я знаю, что существует 3 миллиарда давно сделанных и проверенных адаптивных меню, и сам обычно использовал плагин mmenu (вполне нормальный), но хочется самому разобраться как всё это работает и таким образом на практике получать знания по JS, ну и изобрести своё меню с блэкджэком и нормальным закрыванием.

Ссылка с моими страданиями - https://codepen.io/anon/pen/PMGYLg
Мобильное меню появляется при width: <= 767px.

Отдельно код JS:
$(function() {
	let adaptiveMenu = $("#adaptiveMenu");
	let mainMenu = $("#menu");
	adaptiveMenu.click(function() {
		mainMenu.slideToggle(500);
		$(document).mouseup(function (e) {
	  if (!mainMenu.is(e.target) && mainMenu.has(e.target).length === 0 && $(window).width() < 767) {
          mainMenu.slideUp(500);
	  };
	  });
	});
	$(window).resize(function(){
		if ($(window).width() > 767) {
			mainMenu.removeAttr("style");
		};
	});
});


Заранее спасибо всем, кто даст советы и просто сочувствующим.
  • Вопрос задан
  • 296 просмотров
Решения вопроса 1
dzheraff
@dzheraff Автор вопроса
Решил проблему сам. Оказалось всё достаточно просто. Просто нужно было дописать в проверку условия:
&& !adaptiveMenu.is(e.target) && adaptiveMenu.has(e.target).length === 0
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы