Question

我的网站右下方有一个聊天框，打开和关闭没问题。它默认是隐藏的，然后当你点击＆＃34;聊天＆＃34;它保持开放！我的问题是，当用户更改页面时，我希望聊天框保持打开状态，直到他们决定再次最小化它。目前，如果您更改页面，聊天框最小化。有人可以帮忙吗？

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;

 }

以上是所有用于此目的的脚本。如您所见，聊天框采用iframe的形式。

由于

Answer 1

为了保持页面之间的聊天窗口状态，您需要在某处保持状态。

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

Answer 2

在我看来，需要使用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>

请注意，当您使用网络服务器来提供文件时，Chrome中的Cookie可以正常工作，而不仅仅是打开文件。如果您需要这种可能性，请参考this answer。即使对于静态文件，Firefox也可以提供cookie。

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

2 个答案: