Почему не работает клик обратно на бургер меню?

Question

[vlad123032]

Не могу отследить клик по '.opened' чтобы закрыть меню, на overlay могу а на '.opened' не получается
Как уже не пытался, никак не получается, поэтому должен обратится к специалистам
Вот ссылка на полную версию с меню (чтобы проверить меню, нужно уменьшить разрешение экрана ниже 992пх)
maslianik.website/iphone

<div class="mmenu-overlay"></div>
				<nav class="header__menu">
					<ul>
						<li class="header__menu-item"><a href="#">Характеристики</a></li>
						<li class="header__menu-item"><a href="#">Палитра</a></li>
						<li class="header__menu-item"><a href="#">Выбрать модель</a></li>
						<li class="header__menu-item"><a href="#">Отзывы</a></li>
						<li class="header__menu-item last-child_item"><a href="#">FAQ</a></li>

						<li class="header__menu-consult_btn"><a href="#">Консультация</a></li>
					</ul>
				</nav>


				<button class="menu click">
	       <svg width="40" height="40" viewBox="0 0 100 100">
	        <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />
	        <path class="line line2" d="M 20,50 H 80" />
	        <path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942" />
	      </svg>
	    </button>

$('.click').click(function() {
    $('.header__menu').css({"-webkit-transform":"translate(-100%)"});
    $('.menu').addClass('opened');
    $('.menu').removeClass('click');
    $('.mmenu-overlay').fadeIn();
});

$('.opened').click(function() {
	$('.menu').removeClass('opened');
	$('.menu').addClass('click');
	$('.header__menu').css({"-webkit-transform":"translate(0%)"});
    $('.mmenu-overlay').fadeOut();
});

$('.mmenu-overlay').click(function() {
	$('.menu').removeClass('opened');
	$('.menu').addClass('click');
	$('.header__menu').css({"-webkit-transform":"translate(0%)"});
    $('.mmenu-overlay').fadeOut();
});

Answer 1

[lUser L]

Используй toggleClass()

Comments

[vlad123032]

Ничего не меняется

$('.click').click(function() {
    $('.header__menu').css({"-webkit-transform":"translate(-100%)"});
    $('.menu').toggleClass('opened');
    $('.menu').removeClass('click');
    $('.mmenu-overlay').fadeIn();
});

$('.opened').click(function() {
	$('.menu').addClass('click');
	$('.header__menu').css({"-webkit-transform":"translate(0%)"});
    $('.mmenu-overlay').fadeOut();
});

$('.mmenu-overlay').click(function() {
	$('.menu').removeClass('opened');
	$('.header__menu').css({"-webkit-transform":"translate(0%)"});
    $('.mmenu-overlay').fadeOut();
});

[lUser L]

vlad123032, там у вас дикий-дикий ад. Зачем вы пишите это все в файле jq ? Создайте еще один файл и там пишите. можно вот так сократить:
css

.active {
    -webkit-transform: translate(-100%);
}

js

$('.menu').click(function() {
    $('.header__menu').toggleClass('active');
    $('.mmenu-overlay').fadeToggle();
});

Answer 2

[Sloth-invader]

function menu(){

            var menu = document.getElementById("hidden-menu");

            if(menu.classList.contains('show')){
                menu.classList.remove('show');
            } else {
                menu.classList.add('show');
            }
        }

и в стилях

#hidden-menu:not(.show) {
    display: none;
}

а то все удали и никому не показывай