我正在使用AdminLTE theme作为我网站的前端。
它有一个默认弹出的侧边菜单,可以折叠。
主题没有任何方式可以在页面之间记住这一点,因此我使用HTML5中的本地存储来记住他们的选择,然后在页面上实现它。
这个问题是它必须等待页面加载,默认情况下菜单最大化然后我的脚本检查存储负载,检查菜单是否应该折叠然后关闭菜单 - 沿用动画做到这一点。
因此,每次页面更改或重新加载用户都会看到菜单崩溃。
您可以通过以下链接查看我的意思 - 关闭菜单,然后当您刷新页面时,它会再次弹出:
https://almsaeedstudio.com/preview
这是我用来关闭它的脚本:
//using local storage to remember if sidebar toggled
$(document).ready(function(){
if (Boolean(localStorage.getItem("sidebar-toggle-collapsed", "1"))) { //check if sidebar-toggle-collapsed is set to 1 in local storage
$("body").removeClass('sidebar-collapse'); //make sidebar large
}
if (Boolean(localStorage.getItem("sidebar-toggle-collapsed", ""))) { //check if sidebar-toggle-collapsed is set to nothing in local storage
$("body").addClass('sidebar-collapse'); //make sidebar small (collapsed)
}
$('.sidebar-toggle').click(function() {
if (Boolean(localStorage.getItem("sidebar-toggle-collapsed"))) {
localStorage.setItem("sidebar-toggle-collapsed", "");
} else {
localStorage.setItem("sidebar-toggle-collapsed", "1");
}
});
})
如果没有人在每次加载页面时都看到它,我怎么能让它保持崩溃?我可以通过将他们的选择存储在数据库中来实现这个后端,但是这样做似乎很愚蠢这就是为什么我想看看是否有办法先做这个前端。