Checkbox mobile menu closes on "off-click" or link-click (as intended), but not on icon click.
Hello!
I'm just dabbling with JavaScript, but I really want do a mobile menu.
I'm using this cool animation for the icon: https://codepen.io/aaroniker/pen/LXVqxR
I have followed the interactive part using this answer:
How do I close this checkbox menu after the user clicks on the links or outside of the menu?
Goal: To close the mobile menu on any click interaction.
Right now: Mobile menu closes on any click interaction, except clicking on the icon itself.
I think it's because of the "if( e.target != checkbox )" part, but I have no clue what to replace with it.
Code:
var checkbox = document.querySelector( '#mobileCheck' );
checkbox.addEventListener( 'click', function(){
if( this.checked ) {
document.getElementById("mobile__menu-contents").classList.add("mobile__menu-open");
document.addEventListener( 'click', listener );
}
});
var listener = function( e ) {
if( e.target != checkbox ) {
checkbox.checked = false;
document.getElementById("mobile__menu-contents").classList.remove("mobile__menu-open");
document.removeEventListener( 'click', listener );
}
};
Thanks in advance!