点击事件并非始终注册

Question

我正在尝试制作可在移动设备上使用的网络应用。 以下是我的导航栏，位于我网站的所有页面上 问题出在我的汉堡包上.icon。当屏幕调整大小时（例如在iPhone上），可以单击下拉+再次隐藏我的导航栏。然而，我似乎偶尔会有零星的无反应。几乎从不在Safari或iOS上运行。通常不适用于Chrome。如果我刷新页面几次或重新访问页面，它可以工作，或者不工作，就像掷硬币一样。

$(document).ready(function() {
	"use strict";
    $(".icon").click(function(){
        $(".topnav").toggleClass("responsive");
    });
    });

header {
      width: 100%;
      height: 51px;
      position: relative;
      background-color: #52bad5;
      border-bottom: 5px solid #2C9AB7;
      overflow: scroll;
      text-align: left; }

    header a {
      top: 0; }

    header a .logo {
      width: auto;
      height: 100%;
      margin: 0px 10px;
      position: relative;
      color: #fff;
      top: 0%;
      font-weight: bold;
      display: inline-block;
      letter-spacing: 0px;
      text-decoration: none;
      text-align: left; }

    header .topnav {
      position: relative;
      display: inline-block;
      top: -2px;
      left: 0;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px 14px 16px;
      text-decoration: none;
      font-size: 17px; }
  
    header .icon {
      visibility: hidden;
      height: 31px;
      width: 20px;
      position: absolute;
      top: 0;
      right: 0;
      display: inline-block;
      color: white;
      text-align: center;
      padding: 10px 25px;
      text-decoration: none;
      font-size: 25px;
      z-index: 101;
      cursor: pointer; }
  

    .icon:hover, .topnav:hover {
      background-color: #2C9AB7;
      color: black; }

    @media only screen and (max-width: 640px) {
    .container header nav {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      width: 100%; }

    header {
      position: relative;
      width: 100%;
      left: 0;
      background-color: #52bad5;
      border-bottom: 5px solid #2C9AB7;
      text-align: center;
      overflow: visible;
      align-content: flex-end; }

    header a .logo {
      display: block;
      float: left;
      font-weight: bold;
      text-align: left;
      margin: 0px 0px 0px 10px;
      letter-spacing: normal; }

    header .topnav {
      display: none; }

    header .icon {
      display: inline-block;
      text-align: center;
      visibility: visible;
      cursor: pointer; }

    header .responsive {
      display: flex;
      position: relative;
      clear: left;
      flex-direction: column;
      width: 70px;
      top: 0;
      left: 0;
      background: #52BAD5;
      text-align: left;
      z-index: 101; } }

<header>
    <a href="index.html" style="text-decoration: none">
    <h1 class="logo">Notes</h1></a>
    <a href="index.html" class="topnav">Home</a
    ><a class="topnav" href="AAA.html">AAA</a
    ><a class="topnav" href="BBB.html">BBB</a
    ><a class="topnav" href="CCC.html">CCC</a
    ><a class="topnav" href="DDD.html">DDD</a
    ><div class="icon" style="cursor: pointer">&#9776;</div>
    </header>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

我的小提琴https://jsfiddle.net/TMori7/nn6ofm3s/

感谢您的时间。