Solo quería preguntarte si es posible limitar la cantidad de menús desplegables abiertos al mismo tiempo. A continuación puedes ver el código de mi menú desplegable. Quiero incluir una función que limite la cantidad de menús desplegables abiertos a 1. Entonces, si no se abre ningún menú, debería abrirse normalmente y si ya hay un menú abierto, debería cerrar este y abrir el seleccionado.
<script> var dropdown = document.getElementsByClassName("dropdownbtn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } </script>Gracias por adelantado.
Su ".dropdownbtn" en su lugar lo hace más complicado. ¿Qué opinas de la personalización?
<nav> <ul class="my-nav"> <li> <details class="dropdownbtn"> <summary>First</summary> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </details> </li> <li> <details class="dropdownbtn"> <summary>Second</summary> <ul> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </details> </li> </ul> </nav>Y que tu lógica:
var nav = document.querySelector('.my-nav'); nav.addEventListener('toggle', (event) => { // Only run if the dropdown is open if(!event.target.open) { return; } // Get all other open dropdowns and close them var dropdowns = nav.querySelectorAll('.dropdownbtn[open]'); Array.prototype.forEach.call(dropdowns, (dropdown) => { if(dropdown === event.target) { return; } dropdown.removeAttribute('open'); }); }, true);Tengo esta solución para ti en codepen .