刷新頁面後的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 ""; 
}