如何显示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);
});

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

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>

每次用户访问页面时，滑出都是true，这迫使用户单击 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应该处于滑出位置，直到用户点击 slidingeclick 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.

滑出位置：

img src =https://i.stack.imgur.com/NWpXY.pngalt =输入图片说明here>>

隐藏位置：

>

推荐答案

更新每条评论的回复

如果您知道您的浏览器支持，您可以使用 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屋！