javascript - 页面重新加载后保持菜单切换状态

Question

这是一个完美的切换菜单:如果我单击链接(下面的 HTML 代码)，菜单会折叠。但我想如果用户重新加载页面以保持菜单状态(展开/折叠)。

    $('#menu_toggle').click(function () {
        if ($('body').hasClass('nav-md')) {
            $('body').removeClass('nav-md');
            $('body').addClass('nav-sm');
            $('.left_col').removeClass('scroll-view');
            $('.left_col').removeAttr('style');
            $('.sidebar-footer').hide();

            if ($('#sidebar-menu li').hasClass('active')) {
                $('#sidebar-menu li.active').addClass('active-sm');
                $('#sidebar-menu li.active').removeClass('active');
            }
        } else {
            $('body').removeClass('nav-sm');
            $('body').addClass('nav-md');
            $('.sidebar-footer').show();

            if ($('#sidebar-menu li').hasClass('active-sm')) {
                $('#sidebar-menu li.active-sm').addClass('active');
                $('#sidebar-menu li.active-sm').removeClass('active-sm');
            }
        }
    });

<a id="menu_toggle"><i class="fa fa-bars"></i></a>

如何记住状态？完整元素:http://demo.kimlabs.com/gentelella/production/index.html谢谢

Answer 1

如果菜单已打开或关闭，您应该使用 cookie 来存储 bool 值。然后，当加载页面时，它会检查所有存储的 cookie，并默认使用这些变量。

例如:

在页面加载时:

var menuOutBoolean = Cookies.get("menuOutB") || false;
if (menuOutBoolean == true || menuOutBoolean == "true"){
    //put the menu out
}
else {
    //put menu in
}

关于变化:

if (/*out*/){
    Cookies.set("menuOutB","true");
}
else{
    Cookies.set("menuOutB","false");
}

注意:这里我用了this JavaScript API (Jquery Plugin) .