如何显示在第一次访问DIV和之后没有任何访问，直到关闭浏览器 [英] How to show DIV on first visit and not any visit after until browser is closed

问题描述

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

I have the following script which slides in/slide out a DIV from the right:

// 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);
});

在母版中的HTML code对应于上述的脚本是：

The HTML code in the MasterPage which corresponds to the above script is:

<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将其关闭，从而可以得到一个不友好的用户。

Everytime a user visits the page the slide-out is true which forces the user to click the slideclick DIV to close it, which can get a unfriendly to the user.

我如何使用Cookie或会话所以会出现以下情况：

How can I use a cookie or session so the following can happen:

第一次用户访问显示DIV中滑出位置，一旦点击 slideclick DIV隐藏。它将继续保持对用户隐藏直到浏览器被关闭，在这种情况下，一旦用户再次重新打开浏览器时，DIV应该在滑出位置，直到用户点击 slideclick DIV隐藏起来，等等。

The first time a user visits show the DIV in slide-out position, once they click the slideclick DIV to hide. It will continue to remain hidden from the user until the browser is closed, in which case once the user re-opens the browser again, the DIV should be in slide-out position until the user click the slideclick DIV to hide, and so forth.

滑出的位置是：

隐藏的位置是：

推荐答案

修订ANSWER PER注释

如果你知道你的浏览器都支持它，你可以使用的sessionStorage 而不是数据元素。也使它更干我已经添加附加功能。你会使用它是这样的：

If you know your browsers support it, you can use sessionStorage instead of the data element. Also to make it more DRY I have added additional functions. You would use it something like this:

$(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');
  }
});

这篇关于如何显示在第一次访问DIV和之后没有任何访问，直到关闭浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！