Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Question

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Why is my mobile menu not functioning correctly? The submenu should open on the first click and redirect to the parent URL on the second click, which works fine. However, when the window width increases to 768px or more, the submenu should appear on hover over the parent but the parent tag doesn't redirect properly on the first click.

I need assistance in reorganizing the window.addEventListener('resize', function(){ ... }); as the addEventListener and removeEventListener functions are not working as expected.

Why does the event triggering the prevFirstClick (mobile version) function remain even after enlarging the screen to 768 px?

And why isn't the event triggering the prevFirstClick (desktop version) function added back when the screen size is reduced below 768 px?

I've tried numerous combinations without success. Any guidance would be greatly appreciated!

javascript html css addeventlistener window-resize

Answer 1

Answer №1

Give this a try:

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(); // Prevent 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'); // Reset menus when switching to desktop
    });
  }

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

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

Answer 2

Give this a try:

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(); // Prevent 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'); // Reset menus when switching to desktop
    });
  }

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

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

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Answer №1

Similar questions

Cease making commitments or declarations

Properly appears in Chrome, but experiences issues in Internet Explorer 11

Tips on determining if a string is a properly formatted HTML:

Chrome Flexbox Hacks: Controlling the Size of Nested Items

JS: I'm struggling to understand the scope

Displaying a submenu upon hovering within its designated CSS region

Could there be a glitch affecting the alignment of the dropdown-menu-end in Bootstrap 5.0?

React - Obtain User Login Details and Verify

When a cookie is set in NextJS with a static export, it reverts back to its original

Troubleshooting tip for React JS: encountered an unexpected object error when trying to import components

Adjusting the Aspect Ratio of an Embedded YouTube Video

Tips for enlarging the box width using animation

Generate slanted projection mapboxgl

An issue arises with ReactJS MaterialUI Stepper when there is an overflow

Implementing dynamic props in Vue2 component by passing arbitrary named variables

setting different iframe widths for desktop and mobile views

How to clear input fields in Ant Design ReactJS components

Using Node-twitter within the Express framework

Tips for effectively implementing an Ajax request with JavaScript when the page loads

What is the best way to dynamically change the color of my component depending on the prop passed to it?