在显示/隐藏元素中使用 jquery cookie (jQuery)答案

【问题标题】：Use jquery cookies in showing/hiding elements (jQuery)在显示/隐藏元素中使用 jquery cookie (jQuery)
【发布时间】：2010-06-17 23:52:09
【问题描述】：

如何使用 jquery cookie 在页面中显示/隐藏元素？我从here得到了插件

尝试了一些方法，但我没有成功。我使用 slideUp() 和 slideDown() 函数来显示/隐藏元素。

当一个元素向上滑动时，应该设置一个 cookie。当页面刷新时，元素应该处于向上滑动的位置

上滑时如何应用cookie，页面刷新时如何获取cookie？我需要帮助！

【问题讨论】：

你是说要使用cookies来保存页面上各种元素的up/down状态？
@harpo 是的。当一个元素向上滑动时，应该设置一个 cookie。当页面刷新时，元素应该处于向上滑动的位置
你能展示一下你目前尝试过的代码吗？

标签： javascript jquery function cookies jquery-plugins

【解决方案1】：

我认为以下是您正在寻找的内容。让我知道我是否弄错了。祝你好运！

http://jsfiddle.net/8VCJY/8/

- 编辑-

对不起！我的饼干被倒置了。它现在可以工作（新链接）。再次道歉。

- 编辑-

实际上，我什至不知道它是否有效。看起来确实如此，但随后查看我的代码，我看不出这怎么可能是正确的。总而言之，我很确定在适当的时间设置 cookie 以及诸如此类的东西至少会让你走上正确的道路。老实说，我认为我对插件的使用是错误的（我以前从未使用过它），但我尽我所能。我希望它至少对您有所帮助。

【讨论】：

感谢您的尝试。 cookie 已存储，但未获取 cookie。即使之前关闭，它仍然保持打开状态

【解决方案2】：

这样可以解决问题吗？

<!DOCTYPE html>
<html> <!-- xmlns="http://www.w3.org/1999/xhtml" lang="en" -->
<head>
    <style type="text/css">
    #outer {height:500px;width:500px;background-color:black;position:relative;}
    #slide-me {height:50px;width:50px;background-color:white;position:absolute;top:250px;left:5px;}
    </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
</head>

<body>
<div id="outer">
    <div id="slide-me"></div>
</div>
<button type="button" id="myBtn">Slide it!</button>
<script type="text/javascript">
$slideObj = $('#slide-me');
var topOffset = $.cookie('myCookie');
if(topOffset)
    $slideObj.offset({top: topOffset - $slideObj.height(), left:$slideObj.offset().left});
$('#myBtn').click(function() {
    $slideObj.slideUp();
    $.cookie('myCookie', $slideObj.offset().top);
});
</script>
</body>
</html>

P.S 我使用的是Cookie plugin。

【讨论】：