Tengo dos botones de menú desplegable. Solo tengo una función para alternar entre los dos menús desplegables. Necesito un menú desplegable para cerrar cuando hago clic en el otro y también mostrar el menú desplegable derecho para el botón derecho (el menú desplegable solo debe mostrar un menú desplegable). ¿Cómo debo escribir mi lógica para esto?
<div class="dropdown"> <button onclick="myFunction()" >Dropdown-one</button> <button onclick="myFunction()" >Dropdown-two</button> <div id="myDropdown-one" class="dropdown-content"> <h1>First Drop down</h1> </div> <div id="myDropdown-two" class="dropdown-content"> <h1>Second Drop down</h1> </div> function myFunction() { if ( ?? ?? ? ) { document.getElementById("myDropdown-one").classList.toggle("show"); document.getElementById("myDropdown-two").classList.toggle("show"); } }Puede lograr esto agregando ID a cada botón y usarlo al llamar a la función, para que la función sepa qué botón la está llamando.
Agregamos un atributo data-for a cada botón, con el valor establecido en el ID del menú desplegable correspondiente. Y cuando llamamos a la función, pasamos el atributo llamando usando this.getAttribute('data-for') // 'this' refers to the button. Tenemos una lista de todos los menús desplegables en la función. Eliminamos el que se hizo clic, mostramos el que se hizo clic y ocultamos el resto (en este caso, es solo uno, pero también puede funcionar para más de 2 menús desplegables).
Tenga en cuenta que usamos data- delante del atributo. No es necesario, pero es una práctica común para los atributos no incorporados.
function myFunction(id) { const dropdowns = ['myDropdown-one', 'myDropdown-two'] dropdowns.splice(dropdowns.indexOf(id), 1) document.getElementById(id).classList.add('show') dropdowns.forEach(dropdown => { document.getElementById(dropdown).classList.remove('show') }) } .dropdown-content { display: none; } .show { display: block; } <button data-for="myDropdown-one" onclick="myFunction(this.getAttribute('data-for'))" >Dropdown-one</button> <button data-for="myDropdown-two" onclick="myFunction(this.getAttribute('data-for'))" >Dropdown-two</button> <div id="myDropdown-one" class="dropdown-content"> <h1>First Drop down</h1> </div> <div id="myDropdown-two" class="dropdown-content"> <h1>Second Drop down</h1> </div>