LocalStorage kann die Klasse 'open' nicht hinzufügen und behalten

Question

Ich benutze LocalStorage, um ein Toggle-Banner offen/geschlossen zu halten. Leider konnte ich nicht korrekt eine offene Klasse auf dem Toggle # button des Banners implementieren, um den Stil entsprechend zu ändern.

mein Code:

$('#button').click(function() { 
    $(this).siblings().slideToggle(function() { 
    localStorage.setItem('display', $('#banner').is(':hidden')); 
    }); 
}); 
var block = localStorage.getItem('display'); 
if (block == 'true') { 
    $('#banner').hide() 
} 

mein html

<div id="banner_container"> 
    <div id="banner"> 
     <img src="#"> 
    </div> 
    <button id="button" href="javascript:void(0);"></button> <!-- toggle 'open' class if banner is visible/hidden and keep it in LocalStorage --> 
</div> 

Ich versuchte, die toggleClass ($(this).toggleClass('open');) an die slideToggle Funktion einstellen, aber dies scheint nicht der richtige Ansatz zu sein, wie es nicht ist korreliert mit dem LocalStorage-Verhalten. Irgendein Rat?

Answer 1

Problembehebung durch die ‚activeClass‘ Makeln oder ‚offen‘ und prüfen, ob es existiert beim Laden von Dokumenten.

$(document).ready(function() { 
    $('#button').click(function() { 
    $(this).siblings().slideToggle(function() { 
     localStorage.setItem('display', $('#banner').is(':hidden')); 
    }); 
    }); 
    var block = localStorage.getItem('display'); 
    if (block == 'true') { 
    $('#banner').hide() 
    } 
}); 
$(document).ready(function() { 
    $('#button').click(function() { 
    $('#button').toggleClass('activeClass'); 
    }); 
}); 
$(document).ready(function() { 
    if (!$('#banner').is(':hidden')) { 
    $('#button').addClass('activeClass'); 
    } else if (!$('#banner').is(':visible')) { 
    $('#button').removeClass('activeClass'); 
    } 
}); 

JSFiddle: https://jsfiddle.net/fcewjh7a/17/

Answer 2

wickeln Sie Ihr Javascript in ein jQuery Dokument bereit Anruf. Ihr Problem ist, dass die Javascript das Banner zu verbergen ausgeführt wird, bevor das DOM das Element Banner macht:

$(document).ready(function() { 
    $('#button').click(function() { 
     $(this).siblings().slideToggle(function() { 
     localStorage.setItem('display', $('#banner').is(':hidden')); 
     }); 
    }); 
    var block = localStorage.getItem('display'); 
    if (block == 'true') { 
     $('#banner').hide() 
    } 
}); 

Geige: https://jsfiddle.net/fcewjh7a/3/