切换菜单不适用于汉堡菜单

Question

移动浏览器上菜单的切换功能会应用CSS，但不会响应javascript代码。当您单击菜单时，它应该使中心线不可见，但它仅对css作出响应并保持不可见。

我不知道是什么问题。

$(".hamburger").click(function() {
  $(this).toggleClass("is-active");
});

.hamburger {
  border: 6px solid #061838;
  height: 40px;
  width: 40px;
  margin-top: 10px;
  margin-right: 10px;
  cursor: pointer;
}

.hamburger .line {
  width: 25px;
  height: 6px;
  display: block;
  background: #061838;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.hamburger.is-active .line:nth-child(2) {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <a href="index.html"><img class="logo" src="images/mtg-logo.png"></a>
  <nav>
    <div id="nav">
      <ul>
        <li><a href="episodes.html">EPISODES</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="https://www.patreon.com/podmtg" target="_blank">PATREON</a></li>
        <li>
          <a href="https://www.facebook.com/podmtg" target="_blank"><img src="images/social-icons-facebook.png"></a>
        </li>
        <li>
          <a href="https://twitter.com/podmtg" target="_blank"><img src="images/social-icons-twitter.png"></a>
        </li>
        <li>
          <a href="https://www.instagram.com/podmtg/" target="_blank"><img src="images/social-icons-instagram.png"></a>
        </li>
      </ul>
    </div>

    <div class="hamburger is-active">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
    </div>


  </nav>
</div>