Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

125
Vistas
Local Storage may be conflicting with Toggle Slow

I'm trying to have .child_box class to open and close slow but seems Local Storage is not respecting it. Either it wont open or it wont close. Without Local Storage, it works fine. Stumped.

The 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") 
    });
  }); 

The button:

<div class="open_child" title="', $txt['sub_boards2'], '">
  <i class="fas fa-plus-circle"></i>
</div>
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

I don't think it's localStorage. what i noticed:

a) you don't declare the variable ls.

b) why are you using a div as a button?

c) you don't use parse and stringify to get and set values in the localStorage.

d) you put a title in a DIV container

f) the title you set looks like PHP. it is missing the < ?php echo $text ... ;? > Tags

about 4 years ago · Juan Pablo Isaza Denunciar

0

localStorage isn't conflicting with toggle(). The problem is down to the way the browser schedules a reflow whilst executing JavaScript.

In this event handler

        $(".open_child").click(function(){
            localStorage.setItem('on',true)
            toggled = $(".child_box").toggle(500);
            if(toggled.is(":hidden")){
                localStorage.clear();
            }
        });

your code toggles the .child-box element. It immediately goes to see if that element is now hidden.

The browser is running the animation that is caused by .toggle() and carries on executing the JavaScript. It checks whether the element is hidden, which it isn't because the animation hasn't completed yet, and so doesn't clear the localStorage. Only later when the animation completes would the element appear as 'hidden'.

You need to do things in a different order:

        $(".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');
            }
        });

This version checks the hidden status first, then shows or hides the element as required, and updates localStorage to match.

There is an alternative approach: use the complete function available to the jQuery .toggle() method to update localStorage. You'd still need to check to see what .toggle() has just done, so you don't gain much.

FWIW, I never use .toggle() precisely because I don't know what action it's performing.

A couple of other thoughts:

  • You're not declaring the variable you use, so they're being placed in the global context. This is a bad idea. Declare them in the functions they're used in with let.
  • localStorage stores strings, not other data type. JavaScript has coerced the data for you so you've got away with it, but good practice suggests that you should be more rigorous.
  • Using localStorage.clear() precludes the use of localStorage for any other purpose. Use localStorage.removeItem() instead.
about 4 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 Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda