JQuery show/hide div toggle bleibt nach der Aktualisierung offen

Question

Ich habe eine Chat-Box in der unteren rechten Ecke meiner Website, die öffnet und schließt kein Problem. Es ist standardmäßig ausgeblendet, und wenn Sie auf "Chat" klicken, bleibt es geöffnet! Mein Problem ist, dass ich möchte, dass die Chatbox geöffnet bleibt, wenn ein Benutzer die Seiten wechselt, bis sie sich entscheiden, sie wieder zu minimieren. Im Moment, wenn Sie Seiten wechseln, minimiert sich die Chat-Box. Kann jemand helfen?

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; 

} 

Oben sind die Skripte alle dafür verwendet. Wie Sie sehen können, hat die Chatbox die Form eines Iframes.

Dank

Answer 1

Es scheint mir, dass Cookie oder Local storage benötigt wird, um die Benutzereinstellungen für die aktuelle Sitzung beizubehalten. Wenn die Seite gerendert wird, überprüfen Sie den Anfangszustand und den Status bei jedem Klick.
Das Beispiel der Verwendung von Cookies kann here gefunden werden.
So wird das Beispiel wie folgt aussehen (mit 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> 

Bitte beachten Sie, dass Cookies in Chrom richtig funktionieren, wenn Sie Web-Server verwenden, um Ihre Dateien zu dienen, nicht nur die Datei zu öffnen. Wenn Sie diese Möglichkeit benötigen, wenden Sie sich bitte an this answer. Firefox ist OK mit Serving-Cookies auch für statische Dateien.

Answer 2

Um den Chat-Fenster Zustand zwischen den Seiten zu halten, müssen Sie den Zustand irgendwo anhalten.

Wenn der Benutzer beispielsweise den Chat öffnet, können Sie ein Cookie zum Speichern des neuen Status festlegen. Beim Laden jeder Seite würden Sie den Cookie auf den aktuellen Status (offen/geschlossen) und den Standard prüfen, wenn kein Cookie verfügbar ist.