Tengo este fragmento de código:
function dropdown() { let dropdownText = document.querySelector(".dropdown-button"); let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0]; var aux = dropdownText.innerHTML; dropdownText.innerHTML = item.innerHTML; item.innerHTML = aux; document.querySelector(".dropdown-items").style.display = "none"; } .btn { width: 150px; height: 30px; border-radius: 5px; border: none; box-shadow: 0 3px 1px 0 black; text-align: center; line-height: 30px; color: black; font-family: Consolas, monaco, monospace; } .dropdown { margin: 0 50px 0 50px; position: relative; } .dropdown-items { display: none; position: absolute; } .dropdown:hover .dropdown-button { background: red; } .dropdown:hover .dropdown-items { display: flex; flex-direction: column; align-items: center; justify-content: center; } .dropdown-button { background: orange; font-size: 15px; color: white; } .dropdown-button:hover { cursor: pointer; } .dropdown-items div { margin-top: 5px; transform: scaleX(90%); height: 20px; line-height: 20px; background: lightgray; padding: 5px 0 5px 0; text-align: center; } .dropdown-items div:hover { cursor: pointer; background: gray; } <div class="dropdown"> <button class="btn dropdown-button" type="button">Terminate</button> <div class="dropdown-items"> <div class="btn" onclick="dropdown();">Interrupt</div> </div> </div> Como puede ver, estoy tratando de hacer un menú desplegable. También quiero hacer que cuando haga clic en una opción en el menú desplegable, los elementos desplegables dejen de mostrarse ya que se seleccionó la opción. Es por eso que agregué la línea document.querySelector(".dropdown-items").style.display = "none"; en el archivo JS, ya que pensé que la .dropdown:hover .dropdown-items de mi CSS volvería a cambiar la visualización de esos elementos a visibles al pasar el mouse nuevamente, pero al pasar el mouse nuevamente después del primer clic, el menú desplegable ya no se muestra. ¿Por qué sucede y cómo puedo solucionarlo?
Los estilos en línea anulan cualquier estilo de hoja de estilo, ya que tienen la máxima especificidad de CSS .
En lugar de trabajar con estilos en línea ( el.style.display = "none" ), trabaje con una clase CSS open que toggle . Tampoco utilice detectores de eventos en línea como onclick . Esas son prácticas inseguras y ampliamente consideradas malas por un montón de razones. Utilice addEventListener en su lugar.
// get all the dropdowns in a NodeList const dropdowns = document.querySelectorAll('.dropdown'); // iterate over the list for (const dropdown of dropdowns) { // for each dropdown, add a mouseenter and mouseleave listener dropdown.addEventListener('mouseenter', function(event) { dropdown.classList.add('open'); }); dropdown.addEventListener('mouseleave', function(event) { dropdown.classList.remove('open'); }); // Now add a click listener to each <div class="dropdown-items"> // that transfers the text and closes the dropdown dropdown.querySelector('.dropdown-items').addEventListener( 'click', function(event) { this.previousElementSibling.textContent = this.textContent; dropdown.classList.remove('open'); } ); } .btn { width: 150px; height: 30px; border-radius: 5px; border: none; box-shadow: 0 3px 1px 0 black; text-align: center; line-height: 30px; color: black; font-family: Consolas, monaco, monospace; } .dropdown { display: inline-block; position: relative; } .dropdown-items { display: none; position: absolute; } .dropdown:hover .dropdown-button { background: red; } .dropdown.open .dropdown-items { display: flex; flex-direction: column; align-items: center; justify-content: center; } .dropdown-button { background: orange; font-size: 15px; color: white; } .dropdown-button:hover { cursor: pointer; } .dropdown-items div { margin-top: 5px; transform: scaleX(90%); height: 20px; line-height: 20px; background: lightgray; padding: 5px 0 5px 0; text-align: center; } .dropdown-items div:hover { cursor: pointer; background: gray; } <div class="dropdown"> <button class="btn dropdown-button" type="button">Terminate</button> <div class="dropdown-items"> <div class="btn">Interrupt</div> </div> </div> <div class="dropdown"> <button class="btn dropdown-button" type="button">Terminate</button> <div class="dropdown-items"> <div class="btn">Whatever</div> </div> </div> <div class="dropdown"> <button class="btn dropdown-button" type="button">Terminate</button> <div class="dropdown-items"> <div class="btn">Another one</div> </div> </div> <div class="dropdown"> <button class="btn dropdown-button" type="button">Terminate</button> <div class="dropdown-items"> <div class="btn">Here we go</div> </div> </div>