¿Cómo puedo detectar cuándo se abre o cierra un elemento de detalles en Javascript? Aparte de conectar un oyente a la función de clic y verificar si el atributo de abrir está configurado o no.Detectando la apertura o el cierre de un elemento de detalles
Usted puede hacer algo como esto:
<details id="element">
<p>Details</p>
</details>
<script>
var isOpen = ($("#element").attr("open") == "open");
alert ("Open = " + isOpen);
</script>
Estoy buscando un evento que se dispara cuando el estado cambia de abierto a cerrado o viceversa. – rolisz
¿Hay algún motivo por el que no pueda usar el evento onclick? Siempre puedes probar el enlace en el evento 'DOMAttrModified'. En cualquier caso, el elemento 'details' es tan nuevo y no es compatible con muchos navegadores, por lo que es difícil decir cómo terminará trabajando en el futuro. –
Bueno, si estoy usando el evento onclick de lo que podría estar utilizando dos div en lugar de detalles y resumen. Solo son dos líneas adicionales de jQuery y no me preocupo por la compatibilidad entre navegadores. No sabía acerca de DOMAttrModified, pero no creo que esté funcionando en Chrome, y el elemento de detalle no funciona en ningún otro lugar excepto Chrome :))) – rolisz
Puede utilizar el toggle event:
var details = document.querySelector("details")
details.addEventListener("toggle", function() {
details.firstChild.textContent = "done"
})<!doctype html>
<details>
<summary>toggle event</summary>
</details>Es bueno saber que el evento de alternancia no parece burbujear (?), y que el atributo 'abrir' parece modificarse * antes * de que el evento se desactive. – commonpike
en jQuery
$("#detail-id").on("toggle", function() {
//code
});
Did años ¿alguna vez encuentras una solución a esto? – Bryce