添加 cookie 以切换侧边栏

Question

我这边有一个切换侧边栏，现在我想使用 cookie 让它记住它所处的状态。之前已经提出了很多，但我一直无法找到适用于我的代码的解决方案。（或者也许是这样，但我真的是新手，我可能只是用错了。）

var main = function() {
    $('.icon-menu').click(function() {
        $('.menu').animate({
            left: "0px"
        }, 200);

        $('body').animate({
            left: "240px"
        }, 200);
    });

    $('.icon-close').click(function() {
        $('.menu').animate({
            left: "-240px"
        }, 200);

        $('body').animate({
            left: "0px"
        }, 200);

    });
};

我在这里查看了 this ask, it seems to be what I'm looking for, but the codes where so different I didn't get it to work. Same with enter link description here Viktor 的有用设置 - 用更多 "standard" 重做代码会不会更容易？或者我可以为菜单和正文设置一个 if 命令吗？

感谢所有提示。干杯！

Answer 1

下载并包含js-cookie，使用如下：

$(document).ready(function() {
    $('.icon-menu').click(function() {
        $('.menu').animate({
            left: "0px"
        }, 200);

        $('body').animate({
            left: "240px"
        }, 200);

        Cookies.set('menu-state', 'open');
    });

    $('.icon-close').click(function() {
        $('.menu').animate({
            left: "-240px"
        }, 200);

        $('body').animate({
            left: "0px"
        }, 200);

        Cookies.set('menu-state', 'closed');
    });

    // Open menu (without animation) if it was open last time
    if (Cookies.get('menu-state') === 'open') {
        $('.menu').css({
            left: "0px"
        });

        $('body').css({
            left: "240px"
        });
    } else {
        $('.menu').css({
            left: "-240px"
        });

        $('body').css({
            left: "0px"
        });
    };
});

添加 cookie 以切换侧边栏

Add cookies to toggle sidebar

javascript

cookies

sidebar

toggle