Creé un menú desplegable que se abre cuando el usuario hace clic en el campo de entrada; sin embargo, quiero poder eliminar la clase activa para que el menú desplegable desaparezca cuando un usuario haga clic en cualquier otro lugar de la página. Aquí está mi código:
// menu dropdown const searchInput = document.querySelector('.search-input'); const dropdown = document.querySelector('.dropdown-container'); searchInput.addEventListener('click', () => { dropdown.classList.add('dropdown-container--active') }) window.addEventListener('click', function(e) { if (!searchInput.contains(e.target) && (!dropdown).contains(e.target)) { dropdown.classList.remove('dropdown-container--active') } }) <ul> <li> <input data-target="volts" type="text" placeholder="Volts" class="search-input"> <ul class="dropdown-container"> <h5 class="volt-options-title">Top Searches</h5> <li> <a href="#" class="volt-options">6</a> </li> <li> <a href="#" class="volt-options">12</a> </li> <li> <a href="#" class="volt-options">24</a> </li> <li> <a href="#" class="last-link">48</a> </li> </ul> </li> </ul>Puede hacer uso del evento focusout . Agregue un oyente y elimine la clase active cuando el usuario abandone la entrada de búsqueda. Como se muestra abajo:
searchInput.addEventListener('focusout', (event) => { dropdown.classList.remove('dropdown-container--active') });