Javascript 如何设置关闭菜单的事件侦听器

我有以下代码：

<script type="text/discourse-plugin" version="0.8.13">
  $(document).ready(function() {
    if ($('#daily-check-in').length) {
      $('#daily-check-in').attr("href", settings.daily_check_in_url);
      $('#daily-check-in').text(settings.daily_check_in_text);
    }

    if ($('#current-user').length) {
      var image_bell = 'https://cdn.ramseysolutions.net/church/fpu/images/icon-bell.svg';
      $('#current-user').find('img')[0].setAttribute('src', image_bell);
    }
    setTimeout(function() {
      $('#js_fpu_global_nav > ul').css('transition', 'margin 0.4s').delay(1000);
    }, 2000);
    $('#js_top_nav_hamburger').click(function(e) {
      $('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
      e.stopPropagation();
    });
    $(document).on("click", function(e) {
      if ($(e.target).is("#js_fpu_global_nav > ul") === false) {
        $('#js_fpu_global_nav > ul').removeClass('open-top-nav');
      }
    });
  });
</script>

现在，当我以动态方式在页面之间移动时，它会保持菜单打开。每次用户单击页面的其他位置（不在菜单框中）或移动到其他页面时（即使是从该菜单页面的某个链接），我都会将其关闭

---

我熟悉Vanilla JS

addEventListener

，但我不确定如何在这里使用它，或者它是否是正确的方法。所需的输出是在用户每次单击其他内容时关闭菜单。其他代码可以在Github（）上找到。

addEventListener（）

与jQuery

.on（）类似。

。如果您已经熟悉jQuery，就不需要使用它。只需执行

$（'#js#fpu_global_nav>ul'）。removeClass（'open-top-nav'）

在其他应该关闭菜单的操作中。@Barmer感谢您的回复。你所说的行动是什么意思？我对JQuery的工作原理知之甚少（我没有编写代码，只是想添加我的更改）。当用户单击菜单中的链接时，您有一些代码可以执行某些操作，对吗？将代码放在那里，这样它就关闭了菜单。@Barmar是的，但它不处理用户在页面其他地方单击非链接位置的情况。此外，它不处理用户单击菜单中未包含的链接的情况。所以它应该是通用的，所以我不需要在每个链接代码中添加此代码。

$('#js_top_nav_hamburger').click(function(e) {
  $('#js_fpu_global_nav > ul').toggleClass('open-top-nav');
  e.stopPropagation();
});