Question

我正在使用以下教程：http://www.shopdev.co.uk/blog/cookies-with-jquery-designing-collapsible-layouts/

这是我使用的脚本：

<script type="text/javascript" language="javascript"> 
        $(function() {
            // SETUP:
                // When the info banner is clicked:
                $('#setup').click(function() {
                    $('#intro').css("display","none");
                    $.cookie('intro', 'collapsed');
                });
            // COOKIES
                // Info banner state
                var intro = $.cookie('intro');

            // READ THE COOKIES
                if (intro == 'collapsed') {
                  $('#intro').css("display","none");
                };
        });
</script>

当读取cookie时，脚本会隐藏以下div：

<div class="feedback attention" id="intro">
            Text goes here
            <a id="setup" href="#">Ok I get it, please hide this</a> 
</div>

一切都很好但是当页面加载时，div会暂时显示。我想解决方案是根据cookie信息呈现两个不同的标记服务器。我不知道该怎么做。

Answer 1

在页面加载时，您可以使用php检查cookie，然后添加一个隐藏的类。像<div class="<?= $_COOKIE['intro'] == 'collapsed' ? 'hidden':'' ?>">

这样的东西

编辑：

在CSS中，您可以添加类似.hidden { display: none; }的内容，并使用jQuery添加或删除该类。

Answer 2

你可以做类似的事情：

<?php

if($_COOKIE['intro'] != 'collapsed') {\

    //echo div...

}

Answer 3

如果您使用的是PHP：

<?php if($_COOKIE['intro'] != 'collapsed'){ ?>

<div class="feedback attention" id="intro">
            Text goes here
            <a id="setup" href="#">Ok I get it, please hide this</a> 
</div>

<?php } ?>

要完全删除div而不是隐藏它。

Answer 4

检查$_COOKIE数组中的'intro'

if ($_COOKIE['intro'] == 'collapsed') 
//...

简单地说，在div中添加某种“隐藏”类，或者将其指定为style="display: none;"

//编辑实际上，通过添加“style”属性，您可以确保在解析后不会显示div，而使用“class”属性可能会在等待CSS文件时导致间隔。

因此

<div<?= ($_COOKIE['intro'] == 'collapsed') ? ' style="display: none"' : '' ?>> ..</div>

最好。

如何通过读取cookie来隐藏div serverside

4 个答案: