刷新页面后的Javascript变量页面

Question

我尝试创建自己的折叠边栏，并且希望将cookie保存为设置（折叠或展开栏）。这里是我的代码从页脚包括文件：

var cookieRightSideBar; 
var $postscontainer; 
var $container; 
var $infocontainer; 
cookieRightSideBar = document.cookie.replace(/(?:(?:^|.*;\s*)rightside_container\s*\=\s*([^;]*).*$)|^.*$/, "$1"); 
$postscontainer = document.getElementById('leftside'); 
$container = document.getElementById('rightside_container'); 
$infocontainer = document.getElementById('rightside'); 

function collapseRightside() { 
    document.cookie = (cookieRightSideBar == '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'; 
} 

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

它几乎工作，除了夫妇伤心的事情。 然后刷新一个页面后，我点击按钮展开我的酒吧，看起来像功能collapseRightside第一次点击后无法正常工作（如果展开，则会崩溃，但如果折叠为，则不会展开）。只有在第二次点击后，此功能才能正常工作。 还有一个...如果我折叠酒吧，并再次展开，然后刷新页面，酒吧出现折叠。 我不理解我在逻辑事物上有什么错误，但我不明白在哪里？ 感谢您的任何帮助！

Answer 1

这似乎解决了您的问题。

https://jsfiddle.net/L5unwnL9/5/

的问题是，你的$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 ""; 
}