jQuery toggleclass與餅乾

Question

我有這個腳本動畫styleswitcher.But我不知道我怎麼可以實現實時頁面的餅乾。

$("#demo_icon").click(function() { 
    if($('.demo_changer').hasClass('active')){ 
     $('.demo_changer').animate({'left':'-180px'},function(){ 
      $('.demo_changer').toggleClass('active'); 
     }); 
    }else{ 
     $('.demo_changer').animate({'left':'0px'},function(){ 
      $('.demo_changer').toggleClass('active'); 
     });   
    } 
}); 

THX

Answer 1

您可以使用此jQuery Cookie Library像這樣：

FIDDLE

CSS

.demo_changer { 
    padding: 20px; 
    background-color: grey; 
    text-align: left; 
    left: 0; 
    position: absolute; 
    top: 100px; 
    transition: all 0.3s ease; 
} 

.demo_changer.active { 
    left: -180px; 
} 

JS

function setMyCookie() { 
    myCookieVal = $('.demo_changer').hasClass('active') ? 'isActive' : 'notActive'; 
    $.cookie('myCookieName', myCookieVal, { path: '/' });  
} 

if ($.cookie('myCookieName') == 'isActive') { 
    $('.demo_changer').addClass('active');  
} else { 
    $('.demo_changer').removeClass('active'); 
} 

$("#demo_icon").click(function() { 
    $('.demo_changer').toggleClass('active'); 
    setMyCookie(); 
});