javascript - 为什么我的响应式导航无法切换类别？

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

您的 CSS 位于媒体标记中，允许 CSS 仅在 768 像素以下的屏幕上工作。要了解有关媒体标签的更多信息，请查看此链接:https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 。这是您的代码，但我删除了媒体标签:

$(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>