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:
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
33 Replies
overflow: hidden; to the Menu. Still running into an issue where the content isn't fully collapsingThis is a bit of a mess. I've forked it and will rework it in a bit if no one else has gotten to it yet.
I'm still working on trying to get better with JS. I apologize. I just uploaded my updated version (still can't get the click outside box to work properly). I would typically do this with just regular CSS but it needs to be done with JS
Odd,
checkbox.checked = false doesn't work, but checkbox.click() does.
@hart❤🔥 Would you possibly give me your thoughts on my updated version? Took me a bit to get it to workyou will need to make it responsive for mobile but looks less messy. Im curious though, if youre toggling classes and using JS anyway, why still use the checkbox? thats mostly used to use css to try to hack this issue without JS. at this point your checkbox is making your JS more verbose than it needs to be.
I wasn't sure how to handle button clicks
this is doing the same thing with about 10 lines of JS. and the clickable elements are buttons so they can be interacted with for keyboard users as well. https://codepen.io/Miss-Fox/pen/XWGXREN?editors=0110
Ah actually, maybe I could just check if class is present
This is missing clicking outside of menu to close
you didnt have that implemented in your code so i didnt include it. This was purely an example to show you that you have all the code you needed, you dont need to use a checkbox as its making it more verbose.
Yeah I do. And thank you for the feedback. I'll rework to use a button instead, using input isn't ideal
well then refactor your code to accomplish the same thing but more DRYly.
I honestly think I overthank this 😅
it happens
Would you happen to know why using a button isn't working?
It seems like the other click event listeners are automatically closing the menu (clicking button, .menu element seems to be changing but not adding a class)
where exactly is '.menu-close-container' in your code?
Line 14-19 on CodePen
This code was working with an input / checkbox. I swapped for a button and reworked some of the JS and now running into an issue where the menu auto collapses
ah, blind eyes apparently.
and yer your event listeners are triggering at the same time.
you can do something really hacky like doing a setTimeout of 1ms before adding the event listener to close it when it detects the click otuside
function openMenu () {
menu.classList.add('visible')
document.body.classList.add('body-hidden')
close.addEventListener('click', closeMenu)
setTimeout( () => {
document.addEventListener('click', checkBody)
}, 1)
}
Yeah it seems like theyre triggering at the same time. How is that possible?
or does it consider mouse click down + mouse click up separate ?
because they do? event listeners are going to resolve before the dom is repainted
no it considers mousedown, mouseup, mouseclick all seperate events
Yes but in theory, there isn't a second click to instigate those eventListeners?
the event exists inside the open menu function that is resolving
the function open menu adds the event listener
which has access to the event that is currently there in the global scope
Ahh okay that make's sense
Hmm, I wonder if I did an inline click function on the element itself if this would still happen
we can also do something that is considered slightly better practice
we can close the event off from other things
event.stopPropagation();
function openMenu () {
menu.classList.add('visible')
document.body.classList.add('body-hidden')
event.stopPropagation();
close.addEventListener('click', closeMenu)
document.addEventListener('click', checkBody)
}
Interesting, I've never seen this before
you said in an earlier post that you are still learning JS so 🤷 you will find lots of thigns you dont know
Oh wow that's perfect!
Works exactly as intended now thank you very much
👍
Yes Sir! Thank you a lot I really appreciate it