JavaScript 使用 cookie 显示/隐藏框

标签 javascript html cookies

您好,我的 JavaScript 有一个小问题。

    $(document).ready(function() {
      var status = getCookie();
      if (status > 0) {
        setCookie(1);
        document.getElementById('cookiemenu_dropdown').style.display = "block";
      } else {
        setCookie(0);
        document.getElementById('cookiemenu_dropdown').style.display = "none";
      }
    });
     //-----------------------------------------------------
    function getCookie() {
        var cookies = document.cookie.split(';');
        var FirstCookie = cookies[0];
        var FirstValue = FirstCookie.split('=')[1];
        return FirstValue;
      }
      //-----------------------------------------------------

    function setCookie(value) {
        var expires = new Date();
        expires.setMonth(expires.getYear() + 1);
        document.cookie = 'divStav' + '=' + value + ';EXPIRES=' + expires.toGMTString();
      }
      //-----------------------------------------------------

    function ShowHideCookieBox() {
      var display = document.getElementById('cookiemenu_dropdown').style.display;
      if (display == "block") {
        document.getElementById('cookiemenu_dropdown').style.display = "none";
        setCookie(0);
      } else {
        document.getElementById('cookiemenu_dropdown').style.display = "block";
        setCookie(1);
      }
    }
<div id='cookiemenu'>
  <div class='cookiemenu_header' onclick='ShowHideCookieBox()'>
    <img src='./img/triangle.png' />Letní akce!
    <img src='./img/triangle.png' />
  </div>
  <div id="cookiemenu_dropdown" class='cookiemenu_content'>
    <span class='date'>Lorem</span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mollis magna sed scelerisque hendrerit. Curabitur non quam bibendum, eleifend lorem et, bibendum turpis. Aliquam finibus velit ac lorem consectetur hendrerit. Integer viverra risus vitae
    sapien
  </div>
</div>

脚本应该像这样工作:

当我第一次访问我的网页时,框被隐藏(默认情况下)。当我单击 header 时,会出现该框,并且在 cookie 中设置值 1(我的网站上只有一个 cookie)。当我再次访问时,该框应该打开(从 cookie JavaScript 获取值 1,当该值为 1 时,设置 display:block)。

有问题。单击并显示/隐藏效果很好。当我第一次访问页面时,该框被隐藏(这也可以)。但 cookie 不会保存。然后我让框打开并按 F5,页面重新加载后框被隐藏。

有人可以帮我吗?

最佳答案

对我来说效果很好。你包含了 jQuery 吗? 如果你想用纯 JavaScript 的方式来做,你可以改变你的准备好的功能,如:

window.onload = function() {
      var status = getCookie();
      if (status > 0) {
        setCookie(1);
        document.getElementById('cookiemenu_dropdown').style.display = "block";
      } else {
        setCookie(0);
        document.getElementById('cookiemenu_dropdown').style.display = "none";
      }
    };

关于JavaScript 使用 cookie 显示/隐藏框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36842796/

相关文章:

javascript - 使用jquery单击按钮扩展文本

javascript - document.form.submit() 是如何在代码后面接收的?

javascript - 无法显示 JavaScript 小部件

php - 在 Javascript 中存储大型 Cookie...如何

ios - NSHTTPCookieStorage 丢失 cookie,如果应用程序在重启后手机至少解锁一次之前启动

ruby-on-rails - 不能写永久cookie

javascript - 使用jquery为某些单词添加下划线

javascript - 输入 Scripit # 始终获取大小为零的数组

linux - 将流量重定向到请求特定网页的另一台本地计算机

android - DIV 在 Android 4.2 上不滚动