Question

我有以下代码：

<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>

重要的部分是：

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

现在，当我以动态方式在页面之间移动时，它将保持菜单打开。每当用户单击页面的其他位置（不在菜单框中）或移动到其他页面（即使来自此菜单页面的链接之一）时，我都希望将其关闭。

我对Vanilla JS addEventListener很熟悉，但是我不确定如何在这里使用它，或者它是否正确。期望的输出是每次用户单击其他内容时关闭菜单。可以在Github（link）上找到其他代码。

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

0 个答案: