如何在jQuery中使用toggle（）設置cookie

Question

尋找一個cookie，當用戶點擊鏈接時，它會打開div，然後用戶可以刷新頁面，看到div仍然打開。

======= ======= HTML

<a class="show-settings" href="#"></a> 

======== jQuery的=======

$(function() { 
//Toggle Settings 
var s = $("a.show-settings"); 

//On click to toggle settings 
s.click(function() { 
    $("#s4-ribbonrow, #s4-titlerow").toggle(); 
}); 
//Add/Remove text 
s.toggle(function() { 
    //$(this).text("Hide Settings"); 
}, function() { 
    //$(this).text("Show Settings"); 
}); 

Answer 1

像這樣使用jQuery的餅乾和切換

$(document).ready(function() { 
SetView(); 

$('.show-settings').click(function() { 
    $('#s4-ribbonrow, #s4-titlerow').toggle(0, function(){$.cookie('show-settings', $("#s4-ribbonrow:visible")}); 
}); 

function SetView() { 
    if ($.cookie('loginScreen') == 'true') 
    $('#s4-ribbonrow, #s4-titlerow').show(); 
} 
} 

Answer 2

我之前使用this jQuery plugin的方法幾乎完全相同。這是非常輕量級的，它的文檔很容易遵循。

所以，你可以有這樣的事情：

// This is assuming the two elements are hidden by default 
if($.cookie('myCookie') === 'on') 
    $("#s4-ribbonrow, #s4-titlerow").show(); 

s.click(function() { 
    $("#s4-ribbonrow, #s4-titlerow").toggle(); 

    // Toggle cookie value 
    if($.cookie('myCookie') === 'on') 
     $.cookie('myCookie', 'off'); 
    else 
     $.cookie('myCookie', 'on'); 
}); 

Answer 3

你需要jQuery cookie這個工作的回調功能。

$(function() { 
    var $s = $("a.show-settings"); 

    //On click to toggle settings 
    $s.click(function() { 
     var text = $(this).text(); 
     $("#s4-ribbonrow, #s4-titlerow").toggle(); 
     if(text === 'Show Settings') { 
      $s.text('Hide Settings'); 
      $.cookie('is-hidden', null); // remove cookie 
     }else { 
      $s.text('Show Settings'); 
      $.cookie('is-hidden', 'hidden'); // set cookie 
      } 
     return false; 
    }); 
    if($.cookie('is-hidden')) { // If cookie exists 
     $("#s4-ribbonrow, #s4-titlerow").hide(); 
     $s.text('Show Settings'); 
    } 
}); 

HTML（假設設置默認顯示）

<a class="show-settings" href="#">Hide Settings</a>