重新加載頁面后保持菜單切換狀態

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，並且默認情況下使用這些變量。

例如：

頁面加載：

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插件） 。

Answer 2

這就是我要使用localStorage的那種東西。 只需在狀態更改時在localStorage中設置某種標志，並在頁面加載時獲取它即可。

我應該補充一點，使用css類表示視圖狀態不是一個好主意，如果您的UI變得更加復雜，它會咬您。