Question

我有两个div。一个充当聊天窗口启动器。默认情况下隐藏聊天窗口元素。当我单击聊天窗口启动器元素时，会出现聊天窗口并且启动器会隐藏。我还为聊天窗口做了一个小的关闭按钮，可以反转操作。

问题是当我重新加载页面时，聊天窗口消失了，我不得不重新启动。我该怎么做，以便一旦激活启动器，即使在页面重新加载时聊天窗口仍然可见，因此我只能使用其关闭按钮关闭它？

HTML

<div class="chat-launcher" title="Launch Chat Window">
    <span class=" glyphicon glyphicon-pencil chat-launcher-pencil " style="color: #ffffff;font-size: 20px;"></span>
</div>
<div class="chat-window ">
    <span id="close">X</span>
</div>

的jQuery

<script type="text/javascript">
    $(document).ready(function () {
        $('.chat-launcher').on('click', function () {
            $('.chat-window').show();
            $('.chat-launcher').hide();
        });
    });

    $(document).ready(function(){
        $('#close').on('click',function(){
            $('.chat-window').hide();
            $('.chat-launcher').show();
        });
    });
</script>

Answer 1

您需要一个持久存储才能保存聊天窗口的状态;比如服务器端会话，客户端cookie或localStorage。

利用localStorage，它将是：

$(document).ready(function () {
    $('.chat-launcher').on('click', function () {
        $('.chat-window').show();
        $('.chat-launcher').hide();

        // Set a flag indicating that the char window is open
        localStorage.setItem('chatWindowOpen', true);
    });

    $('#close').on('click',function(){
        $('.chat-window').hide();
        $('.chat-launcher').show();

        // Remove the flag
        localStorage.removeItem('chatWindowOpen');
    });

    // Open chat window if the flag is there
    if (localStorage.getItem('chatWindowOpen')) {
        $('.chat-launcher').trigger('click');    
    }        
});

另一个注意事项;您可能已经注意到，您不需要多次$(document).ready()次呼叫。一个人将为所有人做。

在重新加载页面上保持jquery打开之前隐藏的div

1 个答案: