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或会话以便发生以下情况：

用户首次点击隐藏slideclick DIV时，DIV将处于滑出位置。在浏览器关闭之前，它将继续对用户隐藏，在这种情况下，一旦用户再次重新打开浏览器，DIV应处于滑出位置，直到用户单击slideclick DIV隐藏等等。

滑出位置：

enter image description here

隐藏位置：

enter image description here

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＆＃34; slideClick＆＃34;使用requestNumber ex slideClick.Attributes["class","request_"+requestNumber]

添加类

在css中

slideClick {显示：隐藏;} slideClick.request_1 {显示：块;}

更新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

如何在首次访问时显示DIV，而不是在浏览器关闭之后的任何访问

3 个答案: