在重新加载页面上保持 div 以前被 jquery 隐藏

Question

我有两个 div。一个充当聊天 window 启动器。聊天 window 元素默认隐藏。当我单击聊天 window 启动器元素时，会出现聊天 window 并隐藏启动器。我还为聊天 window 制作了一个小的关闭按钮来反转操作。

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

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

您需要永久性存储才能保存聊天 window 的状态；例如服务器端会话、客户端 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() 调用。一劳永逸。

在重新加载页面上保持 div 以前被 jquery 隐藏

keep a div previously hidden by jquery open on reloading page

html

javascript

css

php

jquery