为什么我的自适应导航不切换课程？

Question

我对编码非常陌生，我正在为班级做最后的项目。我试图制作一个利用HTML，CSS和JavaScript的响应式菜单，但是由于某些原因，代码无法正常工作。当我单击汉堡菜单时，它不会切换“活动”类。

我不确定为什么它不起作用。这是我的代码：

$(document).ready(function() {
  $('.menu').click(function() {
    $('ul').toggleClass('active')
  })
});

@media screen and (max-width: 768px) {
  .toggle {
    display: block;
  }
  ul {
    width: 100%;
    display: none;
  }
  ul li {
    display: block;
    text-align: center;
  }
  .active {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="toggle">
    <i class="fa fa-bars menu"></i>
  </div>
  <ul>
    <li><a href="index.html">home</a></li>
    <li><a class="nav-link" href="#about">about</a></li>
    <li><a class="nav-link" href="#services">services</a></li>
    <li><a class="nav-link" href="#testimonials">testimonials</a></li>
  </ul>


</nav>

请让我知道我在做什么错。

Answer 1

$(document).ready(function() {
  $('.menu').click(function() {
    $('ul').toggleClass('active');
  })
});

.toggle {
  display: block;
}

ul {
  width: 100%;
  display: none;
}

ul li {
  display: block;
  text-align: center;
}

.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="toggle">
    <i class="fa fa-bars menu">Toggle menu</i>
  </div>
  <ul>
    <li><a href="index.html">home</a></li>
    <li><a class="nav-link" href="#about">about</a></li>
    <li><a class="nav-link" href="#services">services</a></li>
    <li><a class="nav-link" href="#testimonials">testimonials</a></li>
  </ul>
</nav>

Answer 2

所以代替：

$(document).ready(function() {
  $('.menu').click(function() {
    $('ul').toggleClass('active');
  })
});

尝试：

$(window).load(function() {
   $('.menu').click(function() {
    $('ul').toggleClass('active');
  })
});

希望有所帮助。