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 无法正常工作（如果已展开则栏已折叠但如果已展开则未展开）。只有在第二次点击后，此功能才能适用于任何阶段。还有一个...如果我折叠bar，然后再次展开然后刷新页面，则该栏显示为折叠状态。我在逻辑问题上记下了我的错误，但我不明白在哪里？谢谢你的帮助!!!

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 "";
}

刷新页面后的Javascript变量

1 个答案: