為什么我的移動漢堡不起作用？ 如何解決這個問題？

Question

當我點擊漢堡時，它不會變成十字架。 盡管我可以在 DOM 中看到正在添加 class.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

您正在添加 class .active包括點。 從script中刪除點

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