如何在第一次访问时显示 DIV 而在浏览器关闭之前不显示任何访问

Question

我有以下脚本，它从右侧滑入/滑出 DIV：

// jQuery 1.9 > Toggle Event dep 1.8
$('#slideClick').click(function () {
    var it = $(this).data('it') || 1;
    switch (it) {
        case 1:
            $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
            $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
            break;
        case 2:
            $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
            $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
            break;
    }
    it++;
    if (it > 2) it = 1;
    $(this).data('it', it);
});

MasterPage中对应上述脚本的HTML代码为：

<div id="slideOut" class="clearfix">
    <div id="slideContent">
        <div style="width: 98%; margin: 0 auto; padding: 5px;">
            <div id="dvImpMsgs" style="padding-left: 10px; padding-right: 10px;">
                <asp:UpdatePanel runat="server" ID="upMessage" ClientIDMode="Static" UpdateMode="Conditional">
                    <ContentTemplate>
                        <asp:Label ID="lblMessage" Font-Size="x-small" runat="server" Text="" ClientIDMode="Static"></asp:Label>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
    </div>
    <div id="slideClick">
        <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center;">
            <div class="arrowMsg">
                <img src="../theImages/arrow_collapse.png" id="imgArrow" style="width: 12px; height: 18px; border: 0; vertical-align: middle;" />
            </div>
            <div style="width: 80px; height: 50px; float: right; margin: 0; padding: 0;">
                <div style="width: 80px; height: 30px; text-align: center; line-height: 30px; vertical-align: middle;" class="brClear">
                    <img src="../theImages/iMsg.png" style="width: 30px; height: 30px; border: 0" />
                </div>
                <div style="color: #FFFFFF; width: 80px; height: 20px; text-align: center; line-height: 20px; vertical-align: middle; font-size: 10px;" class="brClear">
                    MESSAGES
                </div>
            </div>
        </div>
    </div>
</div>

每次用户访问页面时，滑出都是真实的，这会迫使用户单击slideclick DIV 将其关闭，这可能对用户不友好。

如何使用 cookie 或会话，以便发生以下情况：

用户第一次访问时，会在滑出位置显示 DIV，一旦他们单击 slideclick DIV 以隐藏。它将继续对用户隐藏，直到浏览器关闭，在这种情况下，一旦用户再次重新打开浏览器，DIV 应该处于滑出位置，直到用户单击 slideclick DIV 隐藏，并且以此类推。

滑出位置：

隐藏位置：

Answer 1

根据评论更新答案

如果您知道您的浏览器支持它，您可以使用sessionStorage 代替数据元素。另外为了让它更干燥，我添加了额外的功能。你会像这样使用它：

$(function() {
  function showContent(dir) {
    var pxVal = '0px', img='arrow-collapse';
    if (dir === 'close') {
        pxVal = '-290px';
        img = 'arrow-expand';
    }
    $('#slideOut').animate({ right: pxVal }, { queue: false, duration: 500 });
    $("#imgArrow").attr("src", "../theImages/"+img+".png");
  }

  function showHideContent () {
    var currVal = sessionStorage.getItem('showSlideArea');  
    if (currVal === 'false') {
        showContent( 'close');
        currVal='true';
    } else {
        showContent( 'open');
        currVal='false';
    }
    sessionStorage.setItem('showSlideArea', currVal);
  }

  $('#slideClick').on('click', showHideContent);

  var currVal = sessionStorage.getItem('showSlideArea');  
  if (currVal === 'true') {
    showContent('close');
  }
});

Answer 2

在 asp.net 代码中

使变量称为 ex。 requestNumber 并将其存储在会话中

在每个请求中为 +1 赋值

Div "slideClick" 添加类，requestNumber ex slideClick.Attributes["class","request_"+requestNumber]

在 CSS 中

slideClick{显示：隐藏；} slideClick.request_1{display:block;}

更新 1

你也可以使用

Request.UrlReferrer

如果访问者来自不是您的网站或 null，则指定要出现的类

点击网站内的任何链接后，UrlReferrer 将成为您的网站，然后不指定类出现。

终于

根据从 UrlReferrer、cookie 或会话中获取的值，将类添加到您想要出现/消失的 div，如上所述

更新 2

如果你坚持你的范围，试试这个

var it = sessionStorage.getItem('it') || 1;
if(it > 1) {
    $('#slideClick').parent().animate({ right: '-290px' }, { queue: false, duration: 0 });
    $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
}

//var it = $('#slideClick').data('it') || 1;
alert(it);
// jQuery 1.9 > Toggle Event dep 1.8
    $('#slideClick').click(function () {

        alert(it);
        switch (it) {
            case 1:
                $(this).parent().animate({ right: '-290px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_expand.png");
                break;
            case 2:
                $(this).parent().animate({ right: '-0px' }, { queue: false, duration: 500 });
                $("#imgArrow").attr("src", "../theImages/arrow_collapse.png");
                break;
        }
        it++;
        if (it > 2) it = 1;
        sessionStorage.setItem('it', it);
    });

这里的想法是检查值 onload 而不是等待点击。

问候

Answer 3

通过 jquery 设置 cookie。

检查这个答案：https://stackoverflow.com/a/8213459/4016757

或者直接进入插件： https://github.com/carhartl/jquery-cookie