Tengo una clase .hidden en mi archivo CSS y cambio la clase cuando el usuario hace clic en un botón de puntos suspensivos que revela una lista desplegable. La lista debería desaparecer cuando el usuario haga clic en cualquier parte de la ventana. Este es el HTML creado dinámicamente:

 <div class="dropdown"> <span class="options"><i class="fa-solid fa-ellipsis-vertical"></i></span> <div id="myDropdown" class="dropdown-content hidden"> <a href="#"><i class="fa-solid fa-pen"></i> Edit workout</a> <a href="#"><i class="fa-solid fa-circle-minus"></i> Delete workout</a> <a href="#"><i class="fa-solid fa-trash"></i> Clear all workouts</a> </div> </div>

A continuación se muestra el método que alterna la clase .hidden que funciona bien pero no podrá eliminar el .hidden después de llamar al método que debería volver a agregar la clase .hidden

 containerWorkouts.addEventListener('click', function (e) { const items = containerWorkouts.querySelector('.dropdown-content'); if (e.target.classList.contains('fa-ellipsis-vertical')) { items.classList.remove('hidden'); } });

A continuación se muestra el método que vuelve a agregar la clase .hidden para ocultar la lista

 sidebarContainer.addEventListener('click', function(e){ const dropdown = sidebarContainer.querySelector('.dropdown'); const items = containerWorkouts.querySelector('.dropdown-content'); if (!dropdown.classList.contains(e.target)) { if (!items.classList.contains('hidden')) { items.classList.add('hidden'); } } }