Jquery 点击监听器未触发(html、css、jquery)

Question

我在 html 的头部有这个脚本:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
    $(function () {
        $('.nav-toggle').on('click',function(){
            $('.mainnav').toggleClass('open');
        });
    });
</script>

它应该在以下情况下触发:

<header>
    <img class="nav-toggle" src="static/images/menunav.png" style="cursor: pointer;">
</header>

该图像已被点击。

并切换子类的打开方式:

<ul class="text mainnav">
        <li>Home</li>
        <li>Projects</li>
        <li>Techniques</li>
        <li>About me</li>
    </ul>

但是它不会触发 .open 类？我在这里做错了什么(第一次使用 jquery)。

CSS:

.nav-toggle {
  float: right;
  margin-right: 70px;
}

    .mainnav{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #222;
      text-align: center;
      list-style: none;
      display: inline-block;
      transform: translateX(-100%);
      transition: transform 0.6s ease;
    }

    .mainnav.open {
      transform: translateX(50%);
}

Answer 1

我猜问题出在 html 上。尝试拆分

<script src="[JQuery CDN]"></script>
<script>
$(function(){ ... });
</script>