javascript - 页面刷新后的DIV显示块状态

我正在尝试使用jquery使用cookie保存状态，但是没有运气。有人可以检查我的代码有什么问题吗？

$('.slide1').click(function() {
    $('.target1').slideToggle('slow', function() {
        $(this).toggleClass('.target1');
    });
    $.cookie('form_visible', $('.target1').css('display','block').toString());
    return false;
});
$(function() {
    if($.cookie('form_visible') == 'true') {
        $('.target1').css('display','block');
    } else {
        $('.target1').css('display','none');
    }
});

http://jsfiddle.net/J9zQm/

最佳答案

一些问题：


你需要一个插件

为了使用$.cookie，您需要一个plugin。你似乎不知道。
您正在尝试存储"[object Object]"

$('.target1').css('display','block')

返回一个对象（即$('.target1')）

然后，

$('.target1').css('display','block').toString()

退货

"[object Object]"

$('.target1')为空

你用

$('.target1').slideToggle('slow', function() {
    $(this).toggleClass('.target1');
});

那是：


如果$('.target1')为空，则您什么也不做
如果$('.target1')不为空，则删除其类'.target1'，这样后面的$('.target1')将为空。





这里有您想要的工作示例，但是使用sessionStorage而不是$.cookie，因为我不知道它是如何工作的。

JS：

var $target1 = $('.target1');
$target1.toggleClass('hidden', sessionStorage.getItem('form_visible') != 'true');
$('.slide1').click(function() {
    $target1.slideToggle('slow', function() {
        $(this).toggleClass('hidden');
    });
    sessionStorage.setItem('form_visible', $target1.hasClass('hidden'));
});

CSS：

.target1.hidden{
    display:none;
}

Demo