jquery的toggleClass View 没有变化

Question

我正在尝试使用 jquery 创建移动导航菜单。我在那里有脚本，它正在切换类，但没有任何反应。

我已经在另一个网站上进行了此操作，并进行了相同的设置，但在这里不起作用。

我尝试在 youtube 和 Overstack 上查找。我查看了其他几篇有类似问题的帖子，并尝试了一些方法，但没有任何效果。

$('.handle').on('click', function() {
  $('.navsmall').toggleClass('.showing');
});

.handle {
  width: 100%;
  padding: 8px;
  background-color: #222;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  padding-left: 40%;
  cursor: pointer;
}

.handle a:hover {
  color: #5069ec;
  text-shadow: 1px 1px 1px #111;
}

.handle::after {
  position: relative;
  content: '\2630';
  padding-right: 5px;
}

.navsmall_container {
  width: 100%;
  display: none;
}

.navsmall {
  overflow: hidden;
  /* display: none; */
  width: 100%;
  box-sizing: border-box;
  list-style: none;
  text-align: center;
  font-family: sans-serif;
  text-align: right;
  margin: 0;
  padding: 0 15px 0 0;
  -webkit-transition: max-height 1s;
  -ms-transition: max-height 1s;
  -moz-transition: max-height 1s;
  -o-transition: max-height 1s;
  transition: max-height 1s;
}

.navsmall li {
  cursor: pointer;
  line-height: 1.5em;
}

.navsmall li:hover {
  background-color: #bbb;
  color: #5069ec;
  text-shadow: 1px 1px 3px #111;
}

@media screen and (max-width: 667px) {
  .handle {
    display: block;
  }
  .navsmall_container {
    display: block;
  }
  .navsmall {
    max-height: 0;
  }
  .showing {
    display: block;
    max-height: 20em;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="navsmall_container">
  <div class="handle">
    <a href="#">menu</a>
  </div>

  <ul class="navsmall">
    <li>
      <a href="#"></a> home</li>
    <li>
      <a href="#"></a>hook</li>
    <li>
      <a href="#"></a>about</li>
    <li>
      <a href="#"></a>extra</li>
    <li>
      <a href="#"></a>registration</li>
    <li>
      <a href="#"></a>contact</li>
  </ul>
</div>

这应该使菜单显示并从 handle 上下拉。 ul 的类在开发 View 中切换，但在实际 View 中没有任何反应。

我这里也有测试页面。如果需要更多代码，请访问 www.uma-clt.com/nav_test.html。

Answer 1

删除.toggleClass中的点，常见错误，我也经常发生;-)

示例:

$(".handle").on("click", function() {
    $(".navsmall").toggleClass("showing");
});

https://codepen.io/cgpro/pen/zYOPXqB