Question

我的网站上有很少的大块有些用户希望隐藏这些块。

我成功通过按下按钮来隐藏块，但刷新后没有保存。

我该怎么办？
让用户隐藏并显示块，刷新后会保存。

Answer 1

您可以记住客户端（在cookie中或使用网络local storage）或服务器端（为您的用户存储在服务器上的设置）的状态。然后，当在服务器上呈现页面时（如果您在服务器上存储设置）或页面加载时（如果它在客户端上），您可以根据设置显示或隐藏块。

客户端本地存储比cookie更容易处理，并且是well-supported by modern browsers。如果您想在客户端执行此操作，请参阅使用本地存储的示例：Live Copy | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <label><input type="checkbox" id="chk1" checked> Show box1</label>
  <label><input type="checkbox" id="chk2" checked> Show box2</label>
  <div id="box1">Box 1</div>
  <div id="box2">Box 2</div>
  <script>
    (function() {
      var showing;
      showing = JSON.parse(localStorage.showing || "null");
      if (!showing) {
        showing = {
          box1: true,
          box2: true
        };
      }
      else {
        showBox(1, showing.box1);
        showBox(2, showing.box2);
      }

      document.getElementById("chk1").onclick =
        document.getElementById("chk2").onclick =
          cbclicked;

      function cbclicked() {
        var num = this.id.replace(/\D/g, '');
        var box = "box" + num;
        showing[box] = !showing[box];
        showBox(num, showing[box]);
        localStorage.showing = JSON.stringify(showing);
      }      

      function showBox(num, flag) {
        document.getElementById("chk" + num).checked = flag;
        document.getElementById("box" + num).style.display =
          flag ? "block" : "none";
      }
    })();
  </script>
</body>
</html>

显然这不是袖手旁观，我不建议使用.onclick属性等，但我不想进入关于正确连接的跨浏览器问题，这只是一个简单的例子

Answer 2

要保留状态，您应该使用数据库或cookie。更简单的方法是使用cookies。当用户隐藏块时，您应该将块#id保存在您的cookie中，然后在您的PHP代码中需要处理它，这意味着：读取cookie值并隐藏用户选择隐藏的块。

Answer 3

您可以使用$.cookie插件

执行此操作

这将保存切换状态。

if ($.cookie('panel') == 'open'){    
    $('#box1').slideDown('fast');
} else {
    $('#box1').slideUp('fast');
}

// Toggle Panel and Set Cookie //
$('#box').click(function(){        
    $('#box1').slideToggle('fast', function(){
        if ($(this).is(':hidden')) {
            $.cookie('panel', 'closed');
        } else {
            $.cookie('panel', 'open');
        }
    });
});

这是一个实时的例子fiddle

JS隐藏并显示div，刷新后保存

3 个答案: