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: 0.3;
}

.menu-mobile_active {
  opacity: 1;
}

JavaScript

function MobileMenu(btnSelector = '.menu-toggle', {} = {}) {
  const menuSelector = '.menu-mobile'
  const menuButton = typeof btnSelector === 'string' ? document.querySelector(btnSelector) : el;
  const menuElem = document.querySelector(menuSelector)
  if (!menuButton || !menuElem) return;

  function menuBtnClickHandler() {
    menuElem.classList.toggle('menu-mobile_active')
  }

  function onWindowClickHandler(e) {
    const isMenuClick = e.target.closest(menuSelector)
    const isBtnClick = e.target.closest(btnSelector)
    if (!isMenuClick && !isBtnClick) { // deactivate menu
    	menuElem.classList.remove('menu-mobile_active')
    }
  }

  menuButton.addEventListener('click', menuBtnClickHandler)
  document.body.addEventListener('click', onWindowClickHandler)
}

MobileMenu()