6

ボタンのクリックに基づいて自動高さに展開/折りたたむ div があります。私はそれで問題なく動作していますが、jquery.cookie.js を使用して、ユーザーが展開したかどうかを記憶して、ページの更新時に開いたままにしたいと考えています。私は同様の質問を見てきました

例:ページの更新後に cookie.js を使用して div のトグル状態を維持する

ただし、これを自分の状況で機能させることができないようです。それは単なる表示/非表示ではなく、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();
});
4

1 に答える 1

8

試す

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

デモ:フィドル

于 2013-05-10T00:56:41.080 に答える