ページをリロードする際にjqueryが開いているdivを先に隠しておきます

Question

私は2つのdivを持っています。 1つはチャットウィンドウランチャーとして機能します。チャットウィンドウの要素はデフォルトで非表示になっています。チャットウィンドウのランチャー要素をクリックすると、チャットウィンドウが表示され、ランチャーが非表示になります。私はまた、操作を元に戻すチャットウィンドウ用の小さなクローズボタンを作った。

問題は、ページをリロードすると、チャットウィンドウが消えてしまい、再起動する必要があることです。ランチャーがアクティブになったら、チャットウィンドウはページのリロード時にも表示されたままになるので、クローズボタンを使用して閉じることができます。

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

あなたは、チャットウィンドウの状態を保存するために、永続的なストレージを必要とします。サーバーサイドのセッション、クライアントサイドのクッキー、または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');  
    }   
}); 

もう一つのノート。あなたが気づいたかもしれないが、あなたは複数の電話を必要としません。 1つはすべてのために行います。