Как скрыть серверную часть div, читая cookie

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> 

Скрипт скрывает следующий div при чтении файла cookie:

<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':'' ?>">

Edit:

В CSS вы можете добавить что-то вроде .hidden { display: none; } и использовать jQuery для добавления или удаления этого класса.

Answer 2

Вы могли бы просто сделать что-то вроде:

<?php

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

    //echo div...

}

Answer 3

проверьте $_COOKIE массив для 'intro'

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

, просто добавьте некоторый «скрытый» класс в div или укажите его как style="display: none;"

//редактируйте фактически, добавляя атрибут «style», вы гарантируете, что div не будет отображаться сразу после его анализа, а использование свойства «class» может вызвать интервал при ожидании файла CSS.

, таким образом

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

лучше здесь.

Answer 4

если вы используете 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, а не просто скрыть его.