Creé un menú desplegable. Pero allí me enfrento a un problema cuando hice clic fuera manteniendo abierto el menú desplegable, el menú desplegable no se cierra. Intento agregar muchos códigos javascript pero al final no puedo hacerlo. Por favor, alguien que me ayude a solucionar este problema. He dado a continuación el código de mi proyecto. Necesito estas características fuera del menú desplegable, haga clic en cerrar solo a través de este código JS.
function toggleDropDown(id) { document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show")); } body{ font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; display:flex; align-items:center; justify-content: space-between; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown{ display:inline; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 260px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .show{display:block;} <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id=div1> <p>Div1 dropdown</p> </div> <div class="dropdown"> <button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id=div2> <p>Div2 dropdown</p> </div> </div> </div>Una forma de hacerlo es agregar un eventListener en el documento. Luego verifica en qué se ha hecho clic y si involucra su menú desplegable, no hace nada, y si no involucra su menú desplegable, luego cierra los menús desplegables.
Este ejemplo usa la closest() que subirá a los padres del elemento en el que se hizo clic para intentar encontrar uno que tenga el dropdown de clases. Si encuentra uno (no nulo), entonces sabemos que no queremos cerrar el menú desplegable ya que el usuario está interactuando con él. Todos los demás casos cerrarán el menú desplegable.
document.addEventListener('click', (e) => { // cases where we want to close the dropdown if (e.target.closest(".dropdown") === null) { document.querySelectorAll('.dropdown-content').forEach(el => el.classList.remove("show")); } }); function toggleDropDown(id) { document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show")); } body { font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; display: flex; align-items: center; justify-content: space-between; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { display: inline; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 260px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .show { display: block; } <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="div1"> <p>Div1 dropdown</p> </div> <div class="dropdown"> <button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content" id="div2"> <p>Div2 dropdown</p> </div> </div> </div> </div>Quizás esta solución, que no es la mejor ni la más confiable, pero funciona sin JS, podrá ayudarlo:
body { font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; display: flex; align-items: center; justify-content: space-between; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { display: inline; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 260px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } /* added to CSS */ .dropbtn + .dropdown-content:hover, .dropbtn:focus + .dropdown-content { display: block; pointer-events: all !important; } <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown1 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <p>Div1 dropdown</p> </div> <div class="dropdown"> <button class="dropbtn">Dropdown2 <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <p>Div2 dropdown</p> </div> </div> </div>