Estoy tratando de tener la clase .child_box para abrir y cerrar lentamente, pero parece que el almacenamiento local no lo está respetando. O no abre o no cierra. Sin almacenamiento local, funciona bien. Perplejo.
Los js:
$("document").ready(function () { $(".manualclose").click(function () { $(".child_box").toggle(); }); ls = localStorage.getItem('on') if(ls) { $(".child_box").show("slow") } $(".open_child").click(function () { localStorage.setItem('on',true) toggled = $(".child_box").toggle(); if(toggled.is(":hidden")) { localStorage.clear(); } }); $(".manualclose").click(function() { localStorage.clear(); $(".child_box").hide("slow") }); });El botón:
<div class="open_child" title="', $txt['sub_boards2'], '"> <i class="fas fa-plus-circle"></i> </div>No creo que sea localStorage. lo que noté:
a) no declaras la variable ls.
b) ¿por qué estás usando un div como botón?
c) no usa parse y stringify para obtener y establecer valores en localStorage.
d) pones un título en un contenedor DIV
f) el título que configuraste se parece a PHP. le falta el < ?php echo $texto ... ;? > Etiquetas
localStorage no está en conflicto con toggle() . El problema se debe a la forma en que el navegador programa un reflujo mientras ejecuta JavaScript.
En este controlador de eventos
$(".open_child").click(function(){ localStorage.setItem('on',true) toggled = $(".child_box").toggle(500); if(toggled.is(":hidden")){ localStorage.clear(); } }); su código alterna el elemento .child-box . Inmediatamente va a ver si ese elemento ahora está oculto.
El navegador está ejecutando la animación causada por .toggle() y continúa ejecutando JavaScript. Comprueba si el elemento está oculto, lo cual no es así porque la animación aún no se ha completado, por lo que no borra el localStorage . Solo más tarde, cuando se complete la animación, el elemento aparecerá como 'oculto'.
Necesitas hacer las cosas en un orden diferente:
$(".open_child").click(function(){ let hidden =$(".child_box").is(":hidden"); if (hidden) { $(".child_box").show(500); localStorage.setItem('on',true) } else { $(".child_box").hide(500); localStorage.removeItem('on'); } }); Esta versión verifica primero el estado hidden , luego muestra u oculta el elemento según sea necesario y actualiza localStorage para que coincida.
Existe un enfoque alternativo: use la función complete disponible para el método jQuery .toggle() para actualizar localStorage . Aún debe verificar qué acaba de hacer .toggle() , por lo que no gana mucho.
FWIW, nunca uso .toggle() precisamente porque no sé qué acción está realizando.
Un par de otros pensamientos:
let .localStorage almacena cadenas, no otro tipo de datos. JavaScript ha coaccionado los datos por usted, por lo que se salió con la suya, pero la buena práctica sugiere que debe ser más riguroso.localStorage.clear() excluye el uso de localStorage para cualquier otro propósito. Utilice localStorage.removeItem() en su lugar.