在頁面刷新後記住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