为什么单击时我的onClick事件不会总是触发？

Question

对于不同的屏幕尺寸，我的主菜单显示的方式有所不同。还没有完成，但是现在如果视口大于1220px，它将显示一个水平菜单栏。如果视口小于1220px，则它在右侧显示一个图标，并且单击该图标时，会对其应用“打开”类，其高度从0更改为“自动”，因此，它显示其菜单内容

我正在使用jQuery作为菜单图标：

$(".burger-nav").on("click", function() {
$("#main-nav ul").toggleClass("open");
});

现在的问题是，有时在单击图标时会触发此功能，而有时却不会。我已经尝试了很多情况（向上/向下滚动，滚动时展开/关闭菜单，调整屏幕大小，尝试了不同的页面...），但是我找不到一个可以使我指向错误源的一致性。 。

不久前，我就开始使用JavaScript和jQuery，从那时起我学到了很多东西（我想），但是我绝对不是专家（正如我确定我的编码所示）。

无论如何，这是我主菜单功能的代码。

function checkWidth() {
    let windowWidth = $(window).width();
    let maxWidth = 1220;
    var menu = document.getElementById("main_menu");
    var logo = document.getElementById("mad-logo");

    if (windowWidth < maxWidth) {
      if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
        //mobile menu-icon
        $(".burger-nav").on("click", function(event) {
          event.preventDefault();
          $("#main-nav ul").toggleClass("open");
        });

        logo.width = '180';
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';

      } else {
        //menu-icon
        $(".burger-nav").on("click", function() {
          $("#main-nav ul").toggleClass("open");
        });

        logo.width = '250';
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
      }

    } else if (windowWidth > maxWidth) {

      if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        menu.style.backgroundColor = 'rgba(0,0,0,0.8)';
        logo.width = '200';
      } else {
        menu.style.backgroundColor = 'rgba(0,0,0,0)';
        logo.width = '300';
      }
    }
  }

该函数在document.ready，“调整大小”和window.onscroll上被调用。

$(document).ready(function() {
  checkWidth();
}

  $(window).on('resize', function() {
    checkWidth();
  });

  window.onscroll = function() {
    checkWidth();
  };

menu.style和logo.width行似乎有效。另外，当我console.log windowWidth时，该值似乎正确。

为什么单击类.burger-nav的图标时，我的on.click事件不会总是触发？