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);

    });
};

我调查了official doc of Eloquent for Laravel，这似乎是我正在寻找的东西，但代码在那里如此不同我没有得到它的工作。与this ask Viktor在这里有用的设置相同 - 用更“标准”的东西重做代码会更容易吗？或者我可以为菜单和正文设置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以切换侧边栏

1 个答案: