No puedo encontrar donde está el problema. ¿Alguna idea sobre ocultar al hacer clic en cualquier elemento del menú?
var button = document.getElementById("#1"); var menu = document.getElementById("#menu"); button.addEventListener('click', function(event) { if (menu.style.display == "block") { menu.style.display = "none"; } else { menu.style.display == "block"; } }); <ul id="menu"> <li><a href="#home" id="1" class="active">Home</a></li> <li><a href="#model-s" id="1" class="one">Model S</a></li> <li><a href="#model3" id="1">Model 3</a></li> <li><a href="#modelx" id="1">Model X</a></li> <li><a href="#modely" id="1">Model Y</a></li> </ul>No puede obtener document.getElementById("#1") con # . getElementById ya es un selector de ID, por lo que no necesita tener # .
menu.style.display , no tiene estilos en línea para el menu , su condición no pasará por primera vez.
Tampoco puede tener una id múltiple en sus elementos porque la id debe ser única. En ese caso, debería usar class en su lugar (agregué clases de elementos menu-item para selectores de elementos)
He intentado cambiar tu código con algunos comentarios.
//get all menu items var menuItems = document.querySelectorAll(".menu-item"); var menu = document.getElementById("menu"); for (const menuItem of menuItems) { //add click events to menu items menuItem.addEventListener('click', function(event) { //hide menu if click on menu item menu.style.display = "none"; }); } <ul id="menu"> <li><a href="#home" class="active menu-item">Home</a></li> <li><a href="#model-s" class="one menu-item">Model S</a></li> <li><a href="#model3" class="menu-item">Model 3</a></li> <li><a href="#modelx" class="menu-item">Model X</a></li> <li><a href="#modely" class="menu-item">Model Y</a></li> </ul>