zamykanie menu po kliknięciu - js

Question

Witam,

mam pewien problem. Mam menu na mobilce. Po kliknięciu w button menu się rozwija, kolejne kliknięcie powoduje zamknięcie za pomocą toggle. Jak zrobić w js, że po kliknięciu nie w link, menu się zamknie? Założmy otworzyliśmy menu i nie klikamy znowu w button aby je zamknąć tylko klikamy gdziekolwiek na ekranie a menu nam się zwija. Ma ktoś pomysł jak to zrobić?

Tutaj kod: https://codepen.io/alterwar/pen/QgRRPQ

Comments

Logicznie myśląc: dodać zdarzenie click do całości strony, np. do window czy body, które ukrywałoby menu. Tak bym próbował, czy jakoś inaczej się da nie wiem.

---

Bo w samym css wygląda to tak:

side-menu-trigger:focus ~ .side-menu, .side-menu:hover {
      transform: translateX(-300px); 
    }

tylko, że znowu nie obsługuje drugiego kliknięcia w przycisk aby zamknąć

---

Ok zrobione :) https://codepen.io/alterwar/pen/owRrzx

Answer 1

window.addEventListener click >
if (!e.target.matches('slektor css linku')) closeMenu()

Ciekawą sztuczkę można zastosować jeśli chcesz zamykać menu tylko przy kilknięciu poza menu

if (!e.target.matches('slektor-menu, selektor-menu *')) closeMenu()

Comments

Dzięki :) właśnie się zastanawiałem co w przypadku gdy będę miał dropdown menu :) zastosowałem i pięknie działa :)