1

¿Cómo puedo cerrar el div también con los botones que se encuentran dentro de él?

Logro hacerlo, pero solo con un botón y me interesa cerrarlo con cualquiera de los que están dentro:

function openFunctions() {
    var div = document.getElementById("functions");
    div.classList.toggle("block");
}
#functions{
margin-top: 20px;
background-color: #eee;
display: none;
}
#functions button{
display: block;
}
.block{
display: block !important;
}
<button onclick="openFunctions()">Abrir y cerrar</button>

<div id="functions">
<button>Funcion 1</button>
<button>Funcion 2</button>
<button>Funcion 3</button>
</div>

0

1 respuesta 1

3

Puedes hacer lo que deseas agregando al evento clic de todos los botones una llamada a tu función de la siguiente manera:

/* Tu función */
function openFunctions() {
    var div = document.getElementById("functions");
    div.classList.toggle("block");
}
/* Esperamos a que el DOM esté cargado */
document.addEventListener("DOMContentLoaded", (event) => {
  /* Agregamos tu función al evento clic de todos los botones */
  document.querySelectorAll('button').forEach((boton) => {
    boton.addEventListener('click', openFunctions);
  });
});
#functions {
  margin-top: 20px;
  background-color: #eee;
  display: none;
}
#functions button {
  display: block;
}
.block {
  display: block !important;
}
<button>Abrir y cerrar</button>

<div id="functions">
<button>Funcion 1</button>
<button>Funcion 2</button>
<button>Funcion 3</button>
</div>

He hecho uso de querySelectorAll() para buscar todos los botones a los que deseamos agregar la función. Si quieres agregarla únicamente a los botones que están bajo #functions entonces el selector sería, por ejemplo, #functions button.

Con Array.forEach() itero uno a uno los resultados de la búsqueda realizada.

El método addEventListener() agrega una llamada a la función especificada cuando se genere el evento del primer parámetro.

En el caso de los botones el evento click es el primer parámetro y el segundo es el nombre de la función que hemos creado anteriormente.

En el caso de document espero al evento DOMContentLoaded y en este caso, en vez de proporcionar el nombre de una función como segundo parámetro, la genero en línea usando el formato de función reducida indicando (parámetros) => {contenido de la función}.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.