如何使用toggle()在jquery中设置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");
});

- Davis

Answer 1

我之前已经可靠地使用过这个jQuery插件，几乎是为了完全相同的目的。它非常轻量级，而且文档很容易理解。

因此，你可以拥有类似于这样的东西：

// 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');
});

- roobeedeedada

Answer 2

使用jquery-cookies和toggle的回调功能，类似于这样的东西

$(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();
 }
}

- Hupperware

---

这只是在这里随意编写的...我没有测试语法是否完全正确。这就是在顶部使用cookie和回调的原因。 - Hupperware

有没有不使用插件的方法？ - Davis

不，你必须保持状态。你的要求说“它会打开div，然后用户可以刷新页面并看到div仍然是打开的”...这需要你在cookie或会话中保持状态，因为Web本质上是无状态的。 - Hupperware

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>

- shaunsantacruz

---

哎呀，我刚意识到设置应该默认隐藏。如果需要的话，我可以修复我的答案。 - shaunsantacruz

这是最接近的，但它正在设置cookie。 - Davis

还在寻找答案...有没有不使用插件的方法？ - Davis

不确定你所说的“设置cookie”是什么意思？是的，你可以使用原生JavaScript来设置cookie，而不是使用插件。 - shaunsantacruz