Приветствую, друзья!
Пытаюсь сделать простое адаптивное меню, которое потом можно было бы использовать в различных проектах.
Я пытался реализовать закрытие меню, по клику по пустому пространству (изначально закрывалось только при клике на блок "Мобильное меню"). После реализации данной функции появилась проблема, теперь при открытом меню, если нажать на блок "Мобильное меню", пункты меню сначала закрываются, но потом сразу же открываются.
Логику проблемы я понял. У меня происходит конфликт команд. В одной команде клик говорит - закрой, а в другой - открой. Только вот не пойму как эту проблему решить. Суть в том, что меню должно закрываться и при клике по блоку "Мобильное меню" (в будущем блок заменится на что-то более приличное) и при клике по пустому пространству.
И да, я знаю, что существует 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");
};
});
});
Заранее спасибо всем, кто даст советы и просто сочувствующим.
