Question

基本上我有这个标题，当人们不再想要它时可以滑开，当他们想要它时可以再次滑下来。我希望默认情况下它会关闭但是我不希望人们不得不每次加载新页面时不断点击标题切换。我读过有关使用cookie但我在javascript方面的技巧相当有限。以下是我目前使用的代码效果很好：

<div id="headtoggle" onclick="headertoggle()"></div>
<script>
        function headertoggle() {
            var top;
            var pagetop;
            if (document.getElementById("page-header").style.top === "-210px") {
                top = "-11px";
                pagetop = "275px";
            } else {
                top = "-210px";
                pagetop = "80px";
            }
            document.getElementById("page-header").style.top = top;
            document.getElementById("page-body").style.top = pagetop;
        }
</script>

如何更改代码以便它能够记住＆＃34;每个人最后的设定是什么？我也愿意使用jquery。对于这个非常新手的编码器的任何帮助都会非常感激。

谢谢，迪伦

EDIT2 ：我稍微更改了给我的代码并遇到了新问题。

 <div id="headtoggle" onclick="headertoggle()" onload="topposition()"></div>
<script>
    function topposition() {
        var top;
        var pagetop;
        if (localStorage.getItem("headerDown") == "false") {
            top = "-11px";
            pagetop = "275px";
        } else {
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>
<script>
    function headertoggle() {
        var top;
        var pagetop;
        if (document.getElementById("page-header").style.top === "-210px") {
            localStorage.setItem("headerDown", false);
            top = "-11px";
            pagetop = "275px";
        } else {
            localStorage.setItem("headerDown", true);
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>

切换按预期工作，但每当我触发＆＃34;功能topposition（）＆＃34;在firefox控制台中我收到以下错误：

SyntaxError：期望表达式，得到脚本数据的结尾：，/ * 使用FIREBUG命令行评估表达式： * /％0A％09功能％20topposition（）第2行

Answer 1

我认为本地存储将是一个很好的选择。只需记录一个事件或变量或其他内容，然后在每次加载页面时检查它。

https://developer.mozilla.org/en-US/docs/Web/API/Window.localStorage

Answer 2

您可以使用

创建Cookie

document.cookie="headerDown=true";

然后当标题向上移动时，将相同的代码更改为false覆盖cookie。

如果您在页面加载时添加一些读取cookie的代码，您将能够确定需要什么。

您可以通过访问document.cookie来读取cookie，该文件将是以下格式提供的任何cookie的字符串。

cookie1=value; cookie2=value; cookie3=value;

查找你的cookie，你应该可以设置标题是从那里开始还是向下。

Answer 3

使用本地存储将允许您在页面加载之间保存变量。将localStorage.setItem（name，value）添加到if语句中，如下所示。如果您只使用headerToggle函数来定位这些元素，那么函数下面的if语句就足够了。即使您希望标题关闭，也需要两次调用headertoggle函数。

您需要确保if语句放在div的html之后，最有可能的最佳位置是页面的最底部。

＆＃13;

function headertoggle() {
  var top;
  var pagetop;
  if (document.getElementById("page-header").style.top === "-210px") {
    localStorage.setItem("headerDown", true);
    top = "-11px";
    pagetop = "275px";
  } else {
    localStorage.setItem("headerDown", false);
    top = "-210px";
    pagetop = "80px";
  }
  document.getElementById("page-header").style.top = top;
  document.getElementById("page-body").style.top = pagetop;
}

if (localStorage.getItem("headerDown") == "true") {
  headertoggle();
}
headertoggle();

＆＃13;

Javascript / CSS，如何保持变化？

3 个答案: