Tengo un menú desplegable. Agregué un detector de eventos de javascript para que el contenido desplegable se cierre cuando hago clic en una opción. Funciona bien.

JavaScript

 const element = document.querySelector(".dropdown-content"); element.addEventListener("click", () => { element.style.display ="none"; });

 <div class="dropdown" id ="dropdown" > <button class="dropbtn" id ="dropbtn" >Select Trailer <i class="icon ion-location"></i></button> <div class="dropdown-content" id ="dropdown-content"> <a class = "drop" id ="drop" href="#">Option1<br></a> <a class = "drop" id ="drop" href="#">Option2<br></a> </div> </div>

CSS

 .dropbtn { background-color: #F6A695; color: white; padding: 16px; font-size: 18px; border: none; } .dropdown { position: relative; display: inline-block; padding-bottom:80px; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 142px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; max-height:120px; overflow-y:scroll; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .dropdown:hover .dropbtn {background-color: #F4929D;}

TEMA:

El problema al que me enfrento es que cuando el contenido desplegable se cierra al hacer clic, no se abre de nuevo y permanece cerrado.

Lo que he probado:

Intenté cambiar la pantalla para bloquear al hacer clic en el menú desplegable nuevamente, pero parece que no funciona.

 const element = document.querySelector(".dropdown-content"); const mainbutton = document.querySelector(".dropdown"); mainbutton.addEventListener("click", () => { element.style.display ="block"; });