可能吗？隐藏基于 cookie 的 div（创建欧盟 Cookie 法横幅）答案

【问题标题】：Is it possible? To a hide a div based on a cookie (Creating an EU Cookie Law Banner)可能吗？隐藏基于 cookie 的 div（创建欧盟 Cookie 法横幅）
【发布时间】：2016-10-07 08:42:46
【问题描述】：

我正在尝试在我们的网站上获得一个“好看”的欧盟 cookie 法律横幅。

对于那些不知道的人。在英国和欧洲，使用 cookie 的网站必须告知用户。我已经查看了几个 WP 插件，但它们都对设计非常具有侵入性。

我正在使用我自己的 WP Boostrap 主题。导航栏上方是一个带有子行 div 的容器 div。

目前，当用户使用数据切换数据目标单击按钮时，我会隐藏子行 div。

这显示在此处的代码中（因为它位于导航上方，此代码出现在每个页面上。

<div id="container-topline" class="container-fluid bg-moderateblue" style="min-height:2px;">
    <div id="row-cookie" class="row" style="padding-top:10px; padding-bottom:10px;">
        <div class="col-md-1 col-xs-hidden"></div>
        <div class="col-md-10 col-sm-12">
            <div class="col-sm-10 col-xs-12">
                <ul class="fa-ul" style="color:#FFF; font-size:small;">
                <li>
                <i class="fa fa-exclamation-triangle fa-li fa-2x" aria-hidden="true"></i>
                <strong>Privacy &amp; Cookies:</strong> This website uses cookies to improve your experience and to provide essential functionality. By continuing to use this website your consent is implied. To view our privacy policy <a href="#" style="font-weight:bold; color:#FFF;"> click here</a>.
                </li>
                </ul>
            </div>
            <div class="col-sm-2 col-xs-12" style="text-align:center;">           
                <button class="btn btn-default col-md-pull-right" data-toggle="collapse" data-target="#row-cookie">
                <i class="fa fa-times" aria-hidden="true"></i> Close Message
                </button>
            </div>
        </div>
        <div class="col-md-1 col-xs-hidden"></div>
    </div>
</div>

到目前为止一切顺利。但是，这意味着用户必须在每个页面上关闭消息。有点烦人，它会分散网站的注意力。

我想要的是一种在关闭#row-cookie 后将其隐藏 24 小时的方法（这就是我卡住的地方）。

这可能吗？您有任何教程建议可以指导我完成吗？

我认为可能是 Cookie，但我查看了一些在 Stack Overflow 上使用它们的示例，坦率地说，它们让我感到困惑！

非常感谢所有帮助:)！

【问题讨论】：

你使用任何框架或普通的旧javascript吗？

标签： html twitter-bootstrap cookies row show-hide

【解决方案1】：

当用户关闭横幅时，通过 Ajax 设置一个 cookie。使用jQuery，就这么简单：

jQuery(#row-cookies .fa-times).click(
    jQuery.get("http://link-to-php-file.php");
});

对于 PHP 文件，只需在您的主题目录中创建一个（确保使用 child theme，如果您还没有这样做！）

然后在 PHP 文件中做：

<?php 
// Set a cookie to expire in 24 hours
setcookie("closed-cookies", "true", time()+60*60*24, "/");

现在，在您的模板文件中，您只需在打印之前查看 cookie 是否已设置。

<?php
if(isset($_COOKIE['closed-cookies'])) :
?>

// Cookie banner

<?php
endif;
?>

【讨论】：

嗨@lukas-gjetting 谢谢你的回答很棒！现在清楚多了。
关于 jQuery can that read (#row-cookies #row-cookies-button) 如果我给按钮一个 id="row-cookies-button"，我猜设置为仅单击字体 awsome X 的人的那一刻？
@NathanJones 是的，当然。实际上，如果你这样做，你甚至不需要前面的“#row-cookies”。
嗨，它在剥离主题中效果很好，但是当我添加谷歌标签管理器时，它会导致冲突，我放在中的 jquery 失败是有原因的?它需要在一个单独的文件中吗？
@NathanJones 什么样的冲突？如果您在没有冲突的情况下运行 jQuery，请确保使用 jQuery(selector) 和 jQuery.get，而不是 $(selector) 和 $.get。您是否在控制台中收到错误消息？

【解决方案2】：

!(document.cookie.split(";").forEach(function(elem){
   var key = elem.split("=")[0];
   var value = elem.split("=")[1];
   if(key == "privacyRead" && value == "true"){
     // code to hide the div
     document.getElementById("container-topline").style.display = "none"; 
   } 
}))

现在只需向隐私接受按钮添加一个 onclick 处理程序，它将处理 cookie 集的东西 document.cookie = "privacyRead=true;" + "expires=" + new Date(new Date().getTime() + 60*1000*60*24) + hideDiv 就完成了

我假设您没有使用任何框架。

在页面加载时，脚本的第一部分将检查是否有 cookie，如果为 true 将隐藏您的 div。在 cookie 设置部分，我们将添加 1 天的过期时间，这样 cookie 明天就不会在那里了。

【讨论】：