Cuando presiono en el campo desplegable, debe permanecer abierto
Si hago clic fuera del menú desplegable, debería estar cerrado.
Cuando está abierta, la página (efectos de desplazamiento, información sobre herramientas, ...) debería continuar funcionando.
.dropdown { position: relative; &__window { position: absolute; background: $background-alt; width: 100%; z-index: 12; overflow: hidden; display: none; visibility: hidden; &--active { display: block; visibility: visible; } > * { width: 100%; white-space: nowrap; } } } let dropdownBtn = document.querySelectorAll('.dropdown__open') let dropdownWindows = document.querySelectorAll('.dropdown__window') dropdownBtn.forEach((el) => { el.addEventListener('click', (e) => { e.target.nextElementSibling.classList.toggle('dropdown__window--active') }) }) <div class="dropdown"> <button class="dropdown dropdown__open">Open Dropdown</button> <div class="dropdown__window"> <a>Link Text</a> <a>Link Text</a> <a>Link Text</a> <a>Link Text</a> </div> </div>let dropdownBtn = document.querySelectorAll('.dropdown__open'); let dropdownWindows = document.querySelectorAll('.dropdown__window'); dropdownBtn.forEach((el) => { el.addEventListener('click', (e) => { // toggle class e.target.nextElementSibling.classList.toggle('dropdown__window--active'); const listener = (evt) => { // toggle class back, use old event target e.target.nextElementSibling.classList.toggle('dropdown__window--active'); evt.preventDefault(); evt.stopPropagation(); listener(); // remove listener once clicked window.removeEventListener(listener); }; // create global handler for "click off" window.addEventListener('click', listener); }); });