Question

我有一个div，可以根据按钮点击次数扩展/折叠到自动高度。我的工作正常，但我想使用jquery.cookie.js来记住用户是否扩展它，以便它在页面刷新时保持打开状态。我看过类似的问题

e.g。 Keep toggle state on divs using cookie.js after page refresh

然而，我似乎无法让这种情况适合我的情况。它不仅仅是一个直接显示/隐藏，而且我在确定正确设置和使用cookie的语法方面遇到了麻烦。这是我工作代码的一个小提琴，也许有人可以帮助我？

以下是相关代码：

$('#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

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

1 个答案: