刷新后JQuery显示/隐藏div切换保持打开状态

Question

我的网站右下角有一个聊天框，可以打开和关闭任何问题。它默认是隐藏的，然后当你点击“聊天”时它保持打开状态！我的问题是，我希望chatbox在用户更改页面时保持打开状态，直到他们决定再次将其最小化为止。目前，如果您更改页面，聊天框会自行最小化。有人可以帮忙吗？

jQuery(document).ready(function(){ 
    jQuery('#hideshow').on('click', function(event) { 
     jQuery('#initiallyHidden').toggle('show'); 
    }); 
}); 



<div id="chatbox"><input type="button" id="hideshow" value="Quick Chat" 
class="tbox" /> 

<br><div id="initiallyHidden" style="display: none;"> 
<iframe src="'.$url.'" marginheight="0" marginwidth="0" scrolling="yes" allowtransparency="yes" frameborder="0" width="300" height="200"> 


    #chatbox { 
    position:fixed; 
    bottom:0; 
    right:0; 
    float:right; 
} 
#initiallyHidden { 
    bottom:100; 
    right:0; 
    float:right; 
    width:300px; 
    height:200px; 
    border-style: solid; 
    background-color:white; 

} 

以上是所有用于此目的的脚本。正如你所看到的，chatbox是一个iframe的形式。

感谢

Answer 1

在我看来，需要使用Cookie或Local storage来保留当前会话的用户首选项。所以当渲染页面时，请检查初始状态并每次点击更新状态。
使用cookie的例子可以在here找到。
这样的例子看起来就像这样（用js-cookie）：

<!-- To enable cookie operations --> 
<script src="https://code.jquery.com/jquery-latest.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.min.js"></script> 
<script> 
    $(document).ready(function() { 
    var chatVisible = 'chatVisible'; 
    var chatElement = $('#initiallyHidden'); 
    var getCookie = function() { 
     return JSON.parse(Cookies.get(chatVisible) || 'false'); 
    }; 
    var setCookie = function(value) { 
     Cookies.set(chatVisible, value) 
    }; 
    var visible = getCookie(); 
    chatElement.toggle(visible); 
    setCookie(visible); 

    $('#hideshow').on('click', function() { 
     var visible = !getCookie(); 
     setCookie(visible); 
     chatElement.toggle(visible); 
    }); 
    }); 
</script> 

<style> 
    #chatbox { 
     position: fixed; 
     bottom: 0; 
     right: 0; 
     float: right; 
    } 

    #initiallyHidden { 
     bottom: 100px; 
     right: 0; 
     float: right; 
     width: 300px; 
     height: 200px; 
     border-style: solid; 
     background-color: white; 
    } 
</style> 

<div id="chatbox"> 
    <input type="button" id="hideshow" value="Quick Chat" class="tbox" /> 
</div> 
<br> 
<div id="initiallyHidden" style="display: none;"> 
    <iframe src="'.$url.'" marginheight="0" marginwidth="0" scrolling="yes" allowtransparency="yes" frameborder="0" 
      width="300" height="200"></iframe> 
</div> 

请注意，在铬工作饼干正确，当您使用Web服务器，以满足您的文件，而不是打开该文件。如果您需要这种可能性，请参阅this answer。 Firefox甚至可以为静态文件提供cookies。

Answer 2

为了保持页面之间的聊天窗口状态，您将需要在一些地方仍然存在的状态。

例如，当用户打开聊天时，您可以设置cookie来存储新状态。加载每个页面时，您将检查当前状态（打开/关闭）的cookie，如果没有可用的cookie，则默认为cookie。