Question

我有一个叠加菜单，单击链接时需要关闭。我有一些事件侦听器，但是在链接上不起作用。汉堡图标上使用的菜单事件有效，menuItems用于无效的链接。我还需要它才能与Pjax链接一起使用

我已经尝试定位到a之类的menuItems = document.querySelectorAll('.__overlay_nav_content_list_item a');标签，但是它不起作用。

(function($) {
  "use strict";

  var app = function() {
    var body = undefined;
    var menu = undefined;
    var menuItems = undefined;
    var init = function init() {
      body = document.querySelector('body');
      menu = document.querySelector('.burger_menu_icon');
      menuItems = document.querySelectorAll('.__overlay_nav_content_list_item');
      applyListeners();
    };

    var applyListeners = function applyListeners() {
      menu.addEventListener('click', function() {
        return toggleClass(body, '__overlay_nav-active');
      });

      menuItems.addEventListener('click', function() {
        return toggleClass(body, '__overlay_nav-active');
      });
    };

    var toggleClass = function toggleClass(element, stringClass) {
      if (element.classList.contains(stringClass))
        element.classList.remove(stringClass);
      else element.classList.add(stringClass);
    };
    init();
  }();
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

您是否检查了事件冒泡？如果menuItems是菜单的后代，则单击菜单项将触发menuItems.addEventListener('click', function() {，从而切换类，然后该事件将冒泡到menu并触发menu.addEventListener('click', function() {，从而删除刚添加的类。所以最终结果是看起来好像什么都没有改变。

如果这是问题所在，请仅使用menu上的click事件，或使用event.stopPropagation()停止冒泡menuItems事件。

尽管我只希望使用菜单的click事件，但首先尝试：请记住，querySelectorAll（）返回一个nodeList，所以它是一个包含所有链接的数组对象，而不是单个链接。

Array.from( menuItems ).forEach(function( menuItem ) {
  menuItem.addEventListener('click', function( event ) { // add event here so you have access to it!
    event.stopPropagation(); // call stopPropagation() first
    return toggleClass(body, '__overlay_nav-active'); // Once you return, the function stops.
  });
});

所以我们知道这是否是问题。不要忘记添加event作为事件处理函数的参数。

用于关闭重叠菜单的标签的事件监听器不起作用

1 个答案: