导航栏切换按钮不适用于 toggleClass("active");

Question

这刚好发生在我喝咖啡休息后。每当我调整浏览器屏幕大小时，我的切换导航按钮就不再工作了。我认为这是关于 toggleClass("active"); 看看我的代码

$(document).ready(function() {
  $(window).scroll(function() {
    if (this.scrollY > 20) {
      $('.navbar').addClass("sticky");
    } else {
      $('.navbar').removeClass("sticky");
    }
  });
  $('.menu-btn').click(function() {
    $('.navbar .menu').toggleClass("active");
    $('.menu-btn i').toggleClass("active");
  })
});

  @media(max-width: 977px) {
  .max-width {
    padding: 0 50px;
  }
  .menu-btn {
    display: block;
    z-index: 999;
  }
  .menu-btn i.active:before {
    content: "\f00d";
  }
  .navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 0;
    background: black;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
  }
  .navbar .menu.active {
    left: 0;
  }
  .navbar .menu li {
    display: block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">D.N.A <span>Builders</span></a></div>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Teams</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <i class="fa fa-bars"></i>
    </div>
  </div>
</nav>

我尝试了不同的调试方法，但当我将警报 1 置于其上时，点击功能似乎正常工作。但是 toggleClass 没有被执行。

Answer 1

据我所知，您使用的是@media 规则，而此 CSS 在规则内，因此当最大屏幕尺寸较小时，您的 css 仅在该规则内工作超过 977px，那有什么问题吗？如果您在大屏幕上遇到错误，它可以正常工作，这意味着您没有在其他屏幕的 css 代码中设置此条件

检查此代码段以防所有屏幕都需要它

$(document).ready(function() {
  $(window).scroll(function() {
    if (this.scrollY > 20) {
      $('.navbar').addClass("sticky");
    } else {
      $('.navbar').removeClass("sticky");
    }
  });
  $('.menu-btn').click(function() {
    $('.navbar .menu').toggleClass("active");
    $('.menu-btn i').toggleClass("active");
  })
});

  .max-width {
    padding: 0 50px;
  }
  .menu-btn {
    display: block;
    position: absolute;
    z-index: 999;
    background:gray;
  }
  .menu-btn i.active:before {
    top: 0;
    position: relative;
  }
  .navbar .menu {
    position: fixed;
    height: 100vh;
    width: 100%;
    left: -100%;
    top: 2rem;
    background: black;
    text-align: center;
    padding-top: 80px;
    transition: all 0.3s ease;
  }
  .navbar .menu.active {
    left: 0;
  }
  .navbar .menu li {
    display: block;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<nav class="navbar">
  <div class="max-width">
    <div class="logo"><a href="#">D.N.A <span>Builders</span></a></div>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Skills</a></li>
      <li><a href="#">Teams</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <div class="menu-btn">
      <i class="fa fa-bars">[ X ]</i>
    </div>
  </div>
</nav>

导航栏切换按钮不适用于 toggleClass("active");

Navbar togglebutton not working on toggleClass("active");

html

javascript

css

navbar