44 replies

Collapse Nav (Broken)

Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN

Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check:

menuChildren.forEach((child) => {
    console.log(e.target, child)
    if (e.target === child) {
      console.log("Click outside of the menu")
    } else {
      checkbox.checked = false
      menu.classList.remove('visible')
      document.removeEventListener("click", checkMenu);
    }
  });

menuChildren.forEach((child) => {
    console.log(e.target, child)
    if (e.target === child) {
      console.log("Click outside of the menu")
    } else {
      checkbox.checked = false
      menu.classList.remove('visible')
      document.removeEventListener("click", checkMenu);
    }
  });

Should loop through children and determine if the click is a child. If child is clicked, log (not execute the else). However, it seems as though the code is executing directly after calling the click event listener on document (which I assumed shouldn't work like this). What's the most optimal way of fixing this? ~~Also, there's some weird glitch where it stutters when closing. What could be causing that?~~

Thank you

KP-C

Kevin Powell - Community•3y ago•

44 replies

Matt

Collapse Nav (Broken)

Here's my current code: https://codepen.io/Matt-CopOffMatt/pen/eYXJBpN

Currently, I'm having issues with my functionality for collapsing by clicking outside of the menu. The following check:

menuChildren.forEach((child) => {
    console.log(e.target, child)
    if (e.target === child) {
      console.log("Click outside of the menu")
    } else {
      checkbox.checked = false
      menu.classList.remove('visible')
      document.removeEventListener("click", checkMenu);
    }
  });

menuChildren.forEach((child) => {
    console.log(e.target, child)
    if (e.target === child) {
      console.log("Click outside of the menu")
    } else {
      checkbox.checked = false
      menu.classList.remove('visible')
      document.removeEventListener("click", checkMenu);
    }
  });

Collapse Nav (Broken)

Similar Threads

Collapse Nav (Broken)

Similar Threads

Similar Threads

Similar Threads