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来存储布尔值。然后，当加载页面时，它会检查任何存储的cookie，并且默认使用这些变量。

例如：

页面加载

：

if __name__ == '__main__':

    app = QApplication(sys.argv)
    app.setStyle("fusion") #Changing the style
    ex = Example()
    sys.exit(app.exec_())

改变：

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

注意：在这里，我使用了this JavaScript API (Jquery Plugin)。

Answer 2

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

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

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

2 个答案: