Soy un principiante absoluto en javascript. Quiero abrir y cerrar el menú de hamburguesas. No sé por qué no funciona conmigo. Cuando escribo .open{display:block} aparece y ni siquiera puedo abrir o cerrar el menú de hamburguesas, ¿cómo puedo solucionarlo y por qué aparece así? aquí el código:
let btn = document.getElementById('btn-js'); let sidebar = document.getElementById('side-bar'); btn.addEventListener('click',show()); function show(){ sidebar.classList.toggle('open'); } *{ margin: 0; padding:0; box-sizing: border-box; list-style: none; } .side-bar{ display: none; background: cornflowerblue; width: 275px; text-align: center; font-size: 19px; } .side-links{ padding: 30px 0; } .side-links li{ padding: 30px 0; } @media all and (max-width:800px) { .open{ display: block; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css.css"> <title>Document</title> </head> <body> <button id="btn-js" class="btn-css">open</button> <div class="side-bar" id="side-bar"> <ul class="side-links"> <li>home</li> <li>about</li> <li>contact</li> <li>acount</li> </ul> </div> <script src="js.js"></script> </body> </html>