为什么我的移动汉堡不起作用？如何解决问题？

Question

当我点击汉堡时，它不会变成十字架。虽然我可以在 DOM 中看到 .active 类正在添加。此外，菜单根本不响应点击。 .img 和 .nav 是网格项目。也许我在网格容器中混淆了一些东西。 不要犹豫，向我询问有关该项目的更多详细信息。我希望我添加了足够的细节来弄清楚情况。 =) 谢谢！

$(document).ready(function() {
  $('.header-burger').click(function(event) {
    $('.header-burger, .nav').toggleClass('.active');
  });
});

@media only screen and (max-width: 370px) {
  .nav {
    grid-row: 2;
    grid-column: 1/ span 2;
    position: relative;
    top: -112%;
    width: 100%;
    height: 100%;
    background-color: black;
    padding: 0 0 0 10px;
    z-index: 3;
  }
  .nav .active {
    top: 100%;
  }
  .header-burger {
    display: block;
    position: relative;
    width: 30px;
    height: 20px;
  }
  .header-burger:before,
  .header-burger:after {
    content: '';
    background-color: white;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
  }
  .header-burger:before {
    top: 0;
  }
  .header-burger .active:before {
    transform: rotate(45deg);
    top: 9px;
  }
  .header-burger .active:after {
    transform: rotate(-45deg);
    bottom: 9px;
  }
  .header-burger:after {
    bottom: 0;
  }
  .header-burger span {
    position: absolute;
    background-color: white;
    left: 0;
    width: 100%;
    height: 2px;
    top: 9px;
    transition: all 0.3 ease 0.3;
  }
  .header-burger.active span {
    transform: scale(0);
  }
}

<div class="img">
  <img src="./logo.svg">
  <div class="header-burger"><span></span></div>
</div>

<div class="nav">

  <ul class="burger-ul">
    <li class="burger-li"><a>About</a></li>
    <li class="burger-li"><a>Careers</a></li>
    <li class="burger-li"><a>Events</a></li>
    <li class="burger-li"><a>Products</a></li>
    <li class="burger-li"><a>Support</a></li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

您正在添加类.active，包括点。从您的script 中删除点

$(document).ready(function() {
  $('.header-burger').click(function(event) {
    $('.header-burger, .nav').toggleClass('active');
  });
});