jQuery toggleClass example

Toggle class name on click in jQuery

HTML

<div class="menu-mobile">Мобильное меню</div>
<button class="menu-toggle">Клик</button>

CSS

.menu-mobile {
		width: 200px;
		height: 200px;
		background-color: #bbb;
		opacity: .3;
  	}

  	.menu-mobile_active {
  		opacity: 1;
  	}

JavaScript

/* 
    $('.menu-toggle').click(function() {
      $('.menu-mobile').toggleClass('menu-mobile_active');
    });
    
// Скрытие меню при клике на область помимо самого меню
$(document).mouseup(function(e) { // событие клика по веб-документ
  var $menu = $(".menu-mobile"); // тут указываем class элемента
  var $toggle = $('.menu-toggle');
  if (!$menu.is(e.target) // если клик был не по нашему блоку
    &&
    !$toggle.is(e.target) // и не по кнопке
    &&
    $menu.has(e.target).length === 0) { // и не по его дочерним элементам
    $menu.removeClass('menu-mobile_active');
  }
}); */

function MobileMenu(selector = '.menu-toggle', {} = {}) {
	let $handler = typeof selector === 'string' ? document.querySelector(selector) : el;
  if (!$handler) return;
  
  let menuState = false;
  let $menu = document.querySelector('.menu-mobile');
  $handler.addEventListener('click', onHandlerClick);
  
  function onHandlerClick(e) {
  	menuState ? reset() : enable();
  }
  
  function enable() {
    menuState = true;
    toggleMenu('add');
    window.requestAnimationFrame(() => window.addEventListener('click', onWindowClick));
  }
  
  function reset() {
  	toggleMenu('remove');
  	menuState = false;
		window.removeEventListener('click', onWindowClick);
  }
  
  function toggleMenu(action) {
		$menu.classList[action]('menu-mobile_active');
	}
  
  function onWindowClick(e) {
  	let isInsideMenu = e.target.closest('.menu-mobile');
		if (!isInsideMenu) reset();
	}
}

MobileMenu();