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

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.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添加为事件处理函数的参数。