用於關閉重疊菜單的標簽的事件監聽器不起作用

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添加為事件處理函數的參數。