在页面刷新后记住div上的切换状态

Question

我有一个基于按钮点击展开/折叠为自动高度的div。我工作得很好，但我想用jquery.cookie.js来记住用户是否扩展它，以便它在页面刷新时保持打开状态。我看过类似的问题

例如Keep toggle state on divs using cookie.js after page refresh

但是，我似乎无法得到这个工作适合我的情况。这不仅仅是一个直接的显示/隐藏，而且我很难弄清楚正确设置和使用cookie的语法。这里是我的工作代码的小提琴，也许有人可以帮助我？

http://jsfiddle.net/j2Rsy/

这里是相关代码：

$('#viewless').hide(); 
$('#viewmore').click(function(){ 
    var el = $('#resize01'), 
    curHeight = el.height(), 
    autoHeight = el.css('height', 'auto').height(); 
    el.height(curHeight).animate({height: autoHeight}, 500); 
    $('#viewmore').toggle(); 
    $('#viewless').toggle(); 
}); 

$('#viewless').click(function(){ 
$('#resize01').animate({height: '190'}, 500); 
    $('#viewmore').toggle(); 
    $('#viewless').toggle(); 
}); 

Answer 1

尝试

$('#viewless').hide(); 
$('#viewmore').click(function(){ 
    var el = $('#resize01'), 
     curHeight = el.height(), 
     autoHeight = el.css('height', 'auto').height(); 
    el.height(curHeight).animate({height: autoHeight}, 500); 
    $('#viewmore').hide(); 
    $('#viewless').show(); 

    $.cookie('viewmore', true); 

}); 

$('#viewless').click(function(){ 
    $('#resize01').animate({height: '190'}, 500); 
    $('#viewmore').show(); 
    $('#viewless').hide(); 

    $.cookie('viewmore', false); 
}); 

if($.cookie('viewmore') == 'true'){ 
    $('#viewmore').click(); 
} else { 
    $('#viewless').click(); 
} 

演示：Fiddle