addEventListener 我在调整窗口大小时删除菜单上的EventListener

Question

我做错了什么？当菜单在移动版本（< 768 px), first click should open the submenu and second click should get the parent URL (it works). After increasing the window width to >= 768 px）中打开时，子菜单应在将鼠标悬停在父菜单上时显示，并且父标签应在第一次单击时重定向到 URL（这不起作用）。

请帮我重新组织 window.addEventListener('resize', function(){ ... });因为addEventListener和removeEventListener无法正常工作。

为什么当屏幕放大到 >= 768 px 时，触发 prevFirstClick（移动优先）功能的事件没有移除？

为什么屏幕缩小到< 768 px?

时没有添加触发prevFirstClick（桌面优先）功能的事件

有人可以指导我吗？我做了数百种不同的组合，但都无法达到预期的效果。

document.addEventListener('DOMContentLoaded', function() {

  // prevent defalt behavior on parent <a> tags - first click open submenu, second click opend href URL
  let static_window_width = window.innerWidth;
  const menuItems = document.querySelectorAll('.menu-item-has-children');

  function prevFirstClick() {
    menuItems.forEach(item => {

      const preventListener = function(event) {
        let isOpen = item.getAttribute('aria-expanded');

        if (isOpen == 'false') {
          item.setAttribute('aria-expanded', 'true');

          if (event.preventDefault) {
            event.preventDefault();
            event.stopPropagation();
          } else {
            event.returnValue = false;
          }
        }
      }
      item.addEventListener('click', preventListener);
    }); // koniec pętli foreach.
  };

  // fires event whent mobile firts

  if (static_window_width < 768) {
    window.addEventListener('DOMContentLoaded', prevFirstClick);
  }

  // prevent default behavior on parent <a> tag whent first desktop and user deside to resize to mobile and vice versa remove prevent default from <a> tag when mobile first and then resize to desktop.

  window.addEventListener('resize', function() {

    const menuItems = document.querySelectorAll('.menu-item-has-children');
    let dynamic_window_width = this.innerWidth;

    if (dynamic_window_width < 768) {
      window.addEventListener('click', prevFirstClick);
    } else {
      window.removeEventListener('DOMContentLoaded', prevFirstClick, true);

      menuItems.forEach(item => {
        let isOpen = item.getAttribute('aria-expanded');

        if (isOpen == 'true') {
          // first click on parent opens submenu
          item.setAttribute('aria-expanded', 'false');
        }
      });
    }
  });
});

li[aria-expanded="false"] .submenu {
  display: none;
}

li[aria-expanded="true"] .submenu {
  display: zblock;
}

@media screen and (min-width: 768px) {
  ul.menu>li:hover .submenu {
    display: block;
  }
}

<ul class="menu">
  <li class="menu-item-has-children" aria-expanded="false"><a href="#page1/">Page 1</a>
    <ul class="submenu">
      <li><a href="#">subpage 1</a></li>
    </ul>
  </li>
  <li class="menu-item-has-children" aria-expanded="false"><a href="#page2">Page 2</a>
    <ul class="submenu">
      <li><a href="#">subpage 1</a></li>
    </ul>
  </li>
  <li class="menu-item-has-children" aria-expanded="false"><a href="#page3">Page 3</a>
    <ul class="submenu">
      <li><a href="#">subpage 1</a></li>
    </ul>
  </li>
</ul>

Answer 1

试试这个：

document.addEventListener('DOMContentLoaded', function() {
  const menuItems = document.querySelectorAll('.menu-item-has-children');

  function mobileClickHandler(event) {
    let isOpen = this.getAttribute('aria-expanded') === 'true';

    if (!isOpen) {
      this.setAttribute('aria-expanded', 'true');
      event.preventDefault(); // Stop the navigation on first click
    } else {
      this.setAttribute('aria-expanded', 'false'); // Reset for next click
    }
  }

  function addMobileEvents() {
    menuItems.forEach(item => {
      item.addEventListener('click', mobileClickHandler);
    });
  }

  function removeMobileEvents() {
    menuItems.forEach(item => {
      item.removeEventListener('click', mobileClickHandler);
      item.setAttribute('aria-expanded', 'false'); // Ensure menus are reset when switching to desktop
    });
  }

  // Initialize event listeners based on the initial width
  if (window.innerWidth < 768) {
    addMobileEvents();
  }

  window.addEventListener('resize', function() {
    if (window.innerWidth < 768) {
      addMobileEvents();
    } else {
      removeMobileEvents();
    }
  });
});