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

Keep menu toggle state after page reload

本文关键字：菜单 状态 新加载 加载      更新时间：2023-09-26

这是一个运行完美的切换菜单：如果我单击链接（下面的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谢谢

您应该使用 cookie 来存储布尔值，无论菜单是否已打开或关闭。然后，当加载页面时，它会检查任何存储的 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");
}

注意：在这里，我使用了这个JavaScript API（Jquery插件）。

这是我使用 localStorage 的那种事情。只需在状态更改时在localStorage中设置某种标志，并在页面加载时获取它。

我应该补充一点，使用 css 类来表示视图状态不是一个好主意，如果你的 UI 变得更加复杂，它会咬你。

相关文章：