Checkbox mobile menu closes on "off-click" and link-click (as intended), but not on icon click (Vanilla JS)

Viewed 34

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!

0 Answers
Related