如何在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>