無法觸發 jquery 中的 onclick 事件

Question

我無法在 jquery 中單擊它時切換 div 的 class

預期行為：我想將關閉的 class 添加到漢堡菜單中，以便它在點擊時變成十字，並希望顯示移動屏幕的覆蓋圖，但目前我只想弄清楚如何觸發此 onclick 事件。

這是我用來執行此操作的代碼：

$("#mobile-menu").click(function() {
  $(".icon").toggleClass("close");
  var x = document.getElementsByClassName("overlay")[0];
  if ($(".icon").hasClass("close")) {
    x.style.display = "block";
    $("body").addClass("modal-open");
  } else {
    x.style.display = "none";
    $("body").removeClass("modal-open");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu">
  <div class="icon">
    <span class="line top"></span>
    <span class="line middle"></span>
    <span class="line bottom"></span>
  </div>
</div>

.line {
    position: absolute;
    height: 4px;
    width: 100%;
    background-color: black;
    border-radius: 30%;
    transition: cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
  }
  .icon.close .top {
    transform: rotate(45deg);
    top: 48%;
  }
  .icon.close .middle,
  .icon.close .bottom {
    transform: rotate(-45deg);
    top: 48%;
  }

Answer 1

看起來您的元素沒有綁定到點擊 function。您需要使用 document.ready 檢查准備情況和綁定事件。

下面是工作代碼片段：

$(document).ready(function(){

  $("#mobile-menu").click(function() {
    $(".icon").toggleClass("close");
    var x = document.getElementsByClassName("overlay")[0];
    if ($(".icon").hasClass("close")) {
       x.style.display = "block";
       $("body").addClass("modal-open");
     } else {
       x.style.display = "none";
       $("body").removeClass("modal-open");
     }
  });
});