Question

我认为jQuery cookies应该可以解决我的问题，但我不知道它是如何工作的......

这是JS：

function toggle_visibility(id) {
                var e = document.getElementById(id);
                var f = document.getElementById('obsah');
                if (e.style.display === 'block' && f.style.width === '83%') {
                    $("#sidebar").fadeToggle("fast", "linear");
                    setTimeout(function() {
                        f.style.width = '98%';
                    }, 200);
                } else {
                    $("#sidebar").fadeToggle("fast", "linear");
                    f.style.width = '83%';
                }
            }

这是按钮

 <span onclick="toggle_visibility('sidebar');" class="icon_bar" style="float: left; margin: 10px 0 15px 0;"><i class="fa fa-bars fa-2x"></i></span>

Answer 1

也许你想考虑使用HTML5 Web Storage Objects。

从W3Schools页面引用： “HTML5 Web Storage提供了两个用于在客户端上存储数据的新对象：

window.localStorage - 存储没有过期日期的数据

code.sessionStorage - 存储一个会话的数据（关闭选项卡时数据会丢失）“

在您的情况下，您可能会发现sessionStorage是最有用的一个：example code

Answer 2

这里是准备和获取对象的状态：

 var state="visible";//set the initial state of the object
        $(document).ready(function(){
        if(document.cookie!=""){
        var tmp =document.cookie.split(';');
            id=tmp[1];
            state=tmp[0];
            if(state=="unvisible"){
                $("#"+id).hide();
            }
            else{
                 $("#"+id).show();
            }
        }
        });

这是功能：

function toggle_visibility(id) {
   //replace this line by your code you get the idea ;)
   $("#"+id).fadeToggle("fast","linear");
   //
        state=(state=="visible")?"unvisible":"visdible";
        document.cookie=state+";"+id;
  }

Answer 3

今天我终于解决了这个问题：

function toggle_visibility(id) {
                var e = document.getElementById(id);
                var f = document.getElementById('obsah');
                if (e.style.display === 'block' && f.style.width === '83%') {
                    $("#sidebar").fadeToggle("fast", "linear");
                    setTimeout(function() {
                        f.style.width = '98%';
                    }, 200);
                    $.cookie("menuState", "closed");
                } else {
                    $("#sidebar").fadeToggle("fast", "linear");
                    f.style.width = '83%';
                    $.cookie("menuState", "opened");
                }
            }
            $(document).ready(function() {
                var h = document.getElementById('obsah');
                if ($.cookie("menuState") === "opened") {
                    $("#sidebar").show();
                    h.style.width = '83%';
                } else if ($.cookie("menuState") === "closed") {
                    $("#sidebar").hide();
                    h.style.width = '98%';
                }
            });

需要jQuery记住页面刷新时的菜单状态

3 个答案: