在页面刷新时保存菜单状态

Question

I have a menu where I want the state open/close state to persist if the page reloads and when the user has clicked to be closed or open.

I'm using a cookie plugin and I'm almost there but I'm having trouble setting the close cookie to remember the close state, the open cookie still persists.

$(document).ready(function() {
// Open / Close Panel According to Cookie //
if ($.cookie('filtermenu') === 'open'){
    $('.filter').show(); // Show on Page Load / Refresh without Animation
}
else {
}

 if ($.cookie('filtermenu') === 'close' || $.cookie('filtermenu') === null){

    $('.filter').hide(); // Show on Page Load / Refresh without Animation
}
else {
}


// Toggle Panel and Set Cookie //
$('#filter-menu').click(function(){
    $('.filter').slideToggle('fast', function(){
        if ($('#filter-menu').is(':hidden')) {
            $.cookie('filtermenu', 'close', { expires: 30 });
        } else {
            $.cookie('filtermenu', 'open');
        }
    });
    return false;
});
});

Can anyone please see what I'm doing wrong.

Thanks.

Update: Sorry, so now I have this, but it's still not staying closed, am I using the date object incorrectly?

Ok, so now I have this, but the menu still doesn't stay closed.

$(document).ready(function() {
// Open / Close Panel According to Cookie //
if ($.cookie('filtermenu') === 'open'){
    $('.filter').show(); // Show on Page Load / Refresh without Animation
}
else {
}

 if ($.cookie('filtermenu') === 'close' || $.cookie('filtermenu') === null){
    $('.filter').hide(); // Show on Page Load / Refresh without Animation
}
else {
}


// Toggle Panel and Set Cookie //
$('#filter-menu').click(function(){
    $('.filter').slideToggle('fast', function(){


var now = new Date();
var time = now.getTime();
time -= 60 * 1000;
now.setTime(time);
 $.cookie('filtermenu', 'open', {expires: now});

        if ($('#filter-menu').is(':hidden')) {
            $.cookie('filtermenu', 'close', { expires: 30 });
        } else {
            $.cookie('filtermenu', 'open');
        }
    });
    return false;
});
});  

Answer 1

You are going to want to re-set the open cookie with an expiration date older than current time right before you set the close cookie. That way the open cookie will immediately expire and your closed cookie is what remains.

Update - Getting the time

You've inquired about getting the current time in JS, here is some sample code:

var now = new Date();
var time = now.getTime();
time -= 60 * 1000;
now.setTime(time);

This creates a new Date object called now and extracts the time from it with getTime() . We then subtract one minute of time (time is in milliseconds, so 60 * 1000), and then set the date back to that time. You can now use this Date object to set the expiration time of your cookie!