Переменные 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' в то время как это значение равно нулю при загрузке страницы. Это фиксировало его как на контейнере, так и на инфоконтейнере. Я также добавил функции 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 ""; 
}