Very early learner in utilizing Jquery, so it's very possible that my mistake is obvious. I appreciate any help or suggestions offered, as I'm still really grappling with implementing these kinds of intermediate concepts.
I currently have a navigation menu that opens and closes with a checkbox. Upon checked, the class 'checked' is added both to the menu itself .side-popped
and to the button that opens and closes it .sb
.
This is the script I'm currently using to accomplish that:
<script>$('#sidenav').change(function(){
if($(this).is(":checked")) {
$('.side-pop').addClass("checked");
$('.sb').addClass("checked");
} else {
$('.side-pop').removeClass("checked");
$('.sb').removeClass("checked");
}
});</script>
What I am attempting to achieve is to have the checkbox state stored utilizing the jquery cookie plugin, so that on page reload, the checkbox state is maintained (and therefore the menu remains open or closed). My html is below for the checkbox menu navigation.
<div id="side-buttons">
<label for="sidenav" class="side-button"><div class="sb"><span class="icon-lighthouse"></span></div></label>
<input type="checkbox" name="sidenav" id="sidenav" value="Y" class="checkbox-sidenav" />
</div>
</div>
<div class="side-pop">
<div class="sb2"><i class="icon-chat-bubble"></i></div>
<div class="sb2"><i class="icon-bell"></i></div>
<div class="alink">tracked topics</div>
<div class="alink">settings</div>
<div class="alink">inventory</div>
<div class="alink">logout</div>
</div>
I've attempted to use this script from SitePoint, but have not had success.
<script>
var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
$checkboxes = $("#side-buttons :checkbox");
$checkboxes.on("change", function(){
$checkboxes.each(function(){
checkboxValues[this.id] = this.checked;
});
localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});
// On page load
$.each(checkboxValues, function(key, value) {
$("#" + key).prop('checked', value);
});
</script>
Aucun commentaire:
Enregistrer un commentaire