刷新页面后DIV显示块状态

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