刷新後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。