javascript - 根据 Cookie 值隐藏和显示内容

Question

这是我的 Jquery:

  $("#tool").click(function() {
    $(".chelp").slideToggle();
    $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
    $("#tool img").toggle();
    });
  });

当您单击 #tool img 时，#wrapper 与 .chelp 一起隐藏。

我需要用 cookie 来控制它，所以当用户隐藏 #wrapper 时，它会在所有页面上或当他们重新访问该页面时保持隐藏状态。

我知道有一个 jQuery Cookie 插件，但我想用纯 Javascript 来实现，而不是包含另一个插件。

谁能告诉我如何使用纯 javascript 构建它并与 JQuery 合并以创建 cookie，然后在每次加载页面时检查 cookie 以查看是否应隐藏或显示#wrapper？

Answer 1

Cookie extension足够轻便，您不必创建新文件——只需将其插入主 javascript 文件即可。我已经这样做了，而且效果很好。

要使用纯 javascript 并将其与 jQuery 重新集成，本质上就是使用插件。 (事实上​​，查看 Cookie 的简短原始代码是了解如何编写自己的插件的好方法。)

更新

这里有一些基本的 jQuery，您可以使用它来测试和设置 cookie。

    if ( $.cookie("hide-alert") == "true" ) {
        $("#legal-alert").hide();
    }
    $("#legal-alert").append("<div class='close-alert' title='Close'>x</div>");
    $(".close-alert").live("click", function() {
        $(this).parent(".alert").slideUp();
        $.cookie("hide-alert", "true", { expires: 365 });
    });

您需要的所有文档都在插件本身中(我将其删除是为了使其足够小以便直接放入我的 js 文件中)。显然，您可以更改“过期”等。请注意，上面的代码设置了一个按钮来关闭/隐藏框，然后为 onClick 设置了一个实时监听器，这就是隐藏你想要隐藏的框(我在上面称之为'#legal-alert')。