Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

124
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda