me refiero a este hilo: JS usando el evento onclick en li para mostrar el bloque
Desde el escritorio está bien, pero ¿cómo hago lo mismo pero desde el móvil puede tocar el menú "desaparecer" y asegurarse de que permanezca visible hasta el próximo toque?
Actualmente estoy usando este código aquí:
function dropdown() { document.getElementById("Menuitems").style.display = "block"; } #dropdown ul { display: block; transition-duration: 1s; } #dropdown ul li { display: block; background-color: #212121; color: #ffffff; } #dropdown ul li ul { display: none; } #dropdown ul li:hover>ul { /*this is what the onclick event should do*/ display: block; } <div id="dropdown"> <ul> <li onclick="dropdown()"><a>Menu</a> <ul id="Menuitems"> <li><a href="">item 1</a> </li> <li><a href="">item 2</a> </li> <li><a href="">item 3</a> </li> </ul> </li> </ul> </div>Acabo de agregar una clase activa al hacer clic... la clase activa cambia con cada clic. y simplemente agregue el mismo efecto de desplazamiento a la clase activa
function dropdown() { document.getElementById("Menuitems").classList.toggle("active"); } #dropdown ul { display: block; transition-duration: 1s; } #dropdown ul li { display: block; background-color: #212121; color: #ffffff; } #dropdown ul li ul { display: none; } #dropdown ul li:hover>ul, #dropdown ul li>ul.active{ /*this is what the onclick event should do*/ display: block; } <div id="dropdown"> <ul> <li onclick="dropdown()"><a>Menu</a> <ul id="Menuitems"> <li><a href="">item 1</a> </li> <li><a href="">item 2</a> </li> <li><a href="">item 3</a> </li> </ul> </li> </ul> </div>