Состояние блока отображения DIV после обновления страницы

Question

Я пытаюсь сохранить состояние с помощью файла cookie, используя jquery, но не повезло. Может кто-нибудь проверить, что не так с моим кодом?

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