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

The ion-range slider does not function properly when trying to display a central label

Locate the element for a button or an image

Looking for a resolution? Ensure that actions are plain objects by employing custom middleware specifically designed for managing asynchronous actions

The single controller can now showcase various notification styles for operations such as insertion, updating, or error handling

Adjust the image's placement and reduce its size as the screen size decreases, without using any media queries

Is employing absolute paths in our confidential Node dependencies a good idea?

The issue with Angular 4 imports not refreshing in a .less file persists

The Autocomplete feature in Material-UI is not rendering any output

Tips for arranging Radio buttons in multiple columns within the same Radio group in Material UI

Improving an HTML list with JavaScript

The antithesis of jQuery's .parents() selector

Specify the location of the resize button (corner)

The PHP script is failing to send out email notifications

Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

The conditional comment designed for browsers other than Internet Explorer may not work properly on outdated versions of

Unlock the Power of Core 2 MVC with the Cutting-edge Integration of

The style of MUI Cards is not displaying properly

External JavaScript file not executing defined function

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

What is the best way to use border radius on a canvas element similar to a div in order to create a