Не работает toggleClass при клике в js в django

Question

Я хочу сделать меню которое выезжает всё готово только кнопка не работает, js и css подключён с помощью static. Я в js почти ничего не понимаю написал по гайду на ютуб. Если как я сделал так нельзя то как можно это заменить ?

$('.menu-btn').on('click', function(e) {
     e.preventDefault();
     $('.menu').toggleClass('menu_active');
})

.menu {
  position: fixed;
  left: 0;top: 0;
  z-index: 99;
  width: 30%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: 0.5s;
  transform: translateX(-100%);
}
.menu_active {
    transform: translateX(0%);
}
.menu-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50%;
    flex-direction: column;
}
.menu-list a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
}
.menu-btn {
    width: 30px;
    height: 30px;
    background-color: #333;
    position: absolute;
    right: -35px;
    top: 10px;
}

        <div class="menu">
            <a tabindex="0" href="#" class="menu-btn"></a>
            <nav class="menu-list">
                <a href="#">Главная</a>
                <a href="#">Новости</a>
                <a href="#">Контакты</a>
                <a href="#">Портфолио</a>
            </nav>
        </div>

Answer 1

Код работает, но подразумевается подключенный jQuery на странице. Подключить можно так <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> Подключать jQuery для простого кода не целесообразно по этому в примере код переписан на js

//document.querySelector возвращает элемент 
//addEventListener навешивает слушатель "click" на элемент
//preventDefault отменяет действие по умолчанию
//classList.toggle если класс установлен - удаляет, если нет - добавляет

document.querySelector('.menu-btn').addEventListener("click", function(e) {
  e.preventDefault();
  document.querySelector('.menu').classList.toggle('menu_active');
})

.menu {
  width: 30%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transition: 0.5s;
  transform: translateX(-100%);
}

.menu_active {
  transform: translateX(0%);
}

.menu-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50%;
  flex-direction: column;
}

.menu-list a {
  text-decoration: none;
  text-transform: uppercase;
}

.menu-btn {
  width: 30px;
  height: 30px;
  background-color: #333;
  position: absolute;
  right: -35px;
  top: 10px;
}

<div class="menu">
  <a tabindex="0" href="#" class="menu-btn"></a>
  <nav class="menu-list">
    <a href="#">Главная</a>
    <a href="#">Новости</a>
    <a href="#">Контакты</a>
    <a href="#">Портфолио</a>
  </nav>
</div>

БЛОГ НА HUSL

Не работает toggleClass при клике в js в django

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