• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

187
Vistas
¿Cómo escribir la lógica para un botón de alternancia desplegable?

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"); } }
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda