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

Question

我正在尝试使用 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/

Answer 1

一些问题:

1. 您需要一个插件

   为了使用$.cookie，您需要 plugin 。看来你还不知道。

2. 您正在尝试存储“[object Object]”

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

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

   那么，

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

   返回

   "[object Object]"
   

3. $('.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