jQuery меню, работает в одну сторону

Question

Для верстки использовал TailwindCss, добавил к <header> класс -left-52 md:left-0 таким образом я показываю меню на больших мониторах, а на телефоне скрываю.

Создал кнопку, добавил к ней класс toggle-menu - она служит для открытия и закрытия меню на телефонах.(сама кнопка находится вне тега header) В мобильном просмотре, при нажатию на кнопку меню появляется, но более кнопка не удаляет его с экрана.

$(function($) {
    "use strict";

    $(".toggle-menu").on("click",function() {
        $('header').toggleClass('-left-52')
    }, function(){
        $('header').removeClass('-left-52')

    });
  });

<header class="z-20 w-20 fixed bottom-0 top-0 bg-headBg -left-52 md:left-0">
...
</header>

Answer 1

Избавился от проблемы, переписав код на чистый JavaScript.

var menu = document.querySelector('header')
var btn = document.getElementById('toggle')

btn.addEventListener('click', toggle)

console.log(menu.classList())

function toggle() {
    if (menu.classList.contains('-left-52')){
        menu.classList.remove('-left-52')
    } else {
        menu.classList.add('-left-52')
    }
}

БЛОГ НА HUSL

jQuery меню, работает в одну сторону

Ответы (1 шт):