刷新页面后的Javascript变量

我尝试创建自己的折叠侧边栏，并希望保存cookie以进行设置（折叠或扩展栏）。以下是我从页脚到页脚的代码包含文件：

var-cookierRightSidebar；
var$postscontainer；
var$容器；
var$infocontainer；
cookieRightSideBar=document.cookie.replace（/（？：（？：^ |.*\s*）右侧容器\s*\=\s*（[^；]*）.$）|.*$/，“$1”）；
$postscontainer=document.getElementById（'leftside'）；
$container=document.getElementById（'rightside_container'）；
$infocontainer=document.getElementById（'rightside'）；
函数collapseRightside（）{
document.cookie=（CookierRightSidebar='collapsed'）？'rightside_container=expanded'：'rightside_container=collapsed'；
$postscontainer.style.width=（$postscontainer.style.width='99%'）？'80%'：'99%'；
$container.style.display=（$container.style.display='none'）？'block'：'none'；
$infocontainer.style.width=（$infocontainer.style.width='0%'）？'19%'：'0%'；
}
if（document.getElementById（'leftside'））{
var$myheight=document.getElementById（'leftside'）。offsetHeight-62；
document.getElementById（'rightside'）.style.maxHeight=$myheight+'px'；
}
如果（CookierRightSidebar=='expanded'）{
$container.style.display='block'；
$infocontainer.style.width=“19%”；
$postscontainer.style.width=“80%”；
}

它几乎成功了，除了一些令人悲伤的事情。 然后在刷新页面后，我单击按钮展开我的栏，第一次单击后，功能collapseRightside似乎无法正常工作（如果展开了栏，则栏会折叠；如果折叠了，则栏会不会展开）。此功能仅在第二次单击后才能在任何阶段正常工作。 还有一个。。。如果我折叠该条，然后再次展开，然后刷新页面，该条将显示为折叠。 我知道我在逻辑上有什么错误，但我不知道在哪里？

---

谢谢你的帮助

这似乎可以解决您的问题

问题是您正在检查

$container.style.display=='none'

，而该值在页面加载时为空。这在容器和infocontainer上都修复了它。 我还添加了createCookie和getCookie函数，只是因为这对我来说更容易使用

var cookieRightSideBar;
var $postscontainer;
var $container;
var $infocontainer;
var e = document.getElementById('onclick');
e.onclick = collapseRightside;
cookieRightSideBar = getCookie("rightside_container")
$container = document.getElementById('rightside_container');
$infocontainer = document.getElementById('rightside');

function collapseRightside() {
    cookieRightSideBar = (getCookie('rightside_container') == 'collapsed') ? 'expanded' : 'collapsed';

    createCookie("rightside_container", cookieRightSideBar);


    $container.style.display = (!$container.style.display || $container.style.display == 'none') ? 'block' : 'none';

    $infocontainer.style.width = (!$infocontainer.style.width || $infocontainer.style.width == '0%') ? '19%' : '0%';
}


if (document.getElementById('leftside')) {
    var $myheight = document.getElementById('leftside').offsetHeight - 62;
    document.getElementById('rightside').style.maxHeight = $myheight + 'px';
}


if (cookieRightSideBar === 'expanded') {
    $container.style.display = 'block';
    $infocontainer.style.width = "19%";
}


function createCookie(name, value, days) {
    var expires;
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

---

你能提供一个JSFIDLE吗？为什么是Cookie而不是localStorage？@Bartek Banachewicz Cookie，因为它们已经在我试图改变的项目中使用了。如果我使用localStorage，它会以某种方式强制我的代码正常工作？@Yvo Cilon Well。。。我创建了JSFIDLE，在这里重新创建了我的问题，这可能会让您更进一步。似乎在@user3543081中起作用