我在rails项目上安装了sufee admin dashboard。模板页面是here。演示是here
它在演示中运行良好。
这是切换的代码：
$('#menuToggle').on('click', function(event) {
$('body').toggleClass('open');
});
您可以注意到，当导航到新页面时，侧边栏会打开，即使它已折叠。我希望它能够坚持崩溃的状态。同样对于开放状态，如果它是开放的并且我导航到新页面它应该保持打开状态。换句话说，只有在单击切换时，侧栏状态才会更改。我怎样才能实现它？
你可以试试这个：
$('#menuToggle').off('click').on('click', function(event) {
$('body').toggleClass('open');
});
检查网站并查看其行为，您必须将class =“open”添加到body标签，这就是全部
如果侧边栏的默认状态是打开的，那么在任何非动态页面加载时，它将打开。您需要引入某种持久性数据存储来存储当前用户的当前状态。
这里最常见的选择是在同一个点击事件上设置cookie。为了防止在页面加载后侧边栏折叠，您可以读取cookie服务器端以确定是否包含open正文类以帮助防止FOUC类型问题。
这样的事情应该让你开始：
function setCookie(name, value){
var expires = new Date();
expires.setTime(expires.getTime() + 31536000000);
document.cookie = name + '=' + value + ';expires=' + expires.toUTCString();
}
var getCookie = function(name){
var pair = document.cookie.match(new RegExp(name + '=([^;]+)'));
return !!pair ? pair[1] : null;
};
$('#menuToggle').on('click', function(){
if( $('body').hasClass('open'){
// Menu Open: Collapse it, save Collapsed State
$('body').removeClass('open');
setCookie('menuState', 'collapsed');
} else {
// Menu Collapsed: Open it and save Open State
$('body').addClass('open');
setCookie('menuState', 'open');
}
});
现在，如果您需要在JS中读取该cookie状态，您可以执行以下操作（虽然这可以导致我之前提到的FOUC，所以您可能想要read the cookie serverside - 我不熟悉如何在Rails中执行此操作但是它看起来很容易
var menuState = getCookie('menuState');
if( menuState == 'collapsed' ){
$('body').removeClass('open');
} else if( menuState == 'open' ){
$('body').addClass('open');
}
也许你可以尝试这种方法。只是为了得到这个想法，顺便说一下，片段上的错误是normal，所以最好先在单独的文件上尝试。你重新加载浏览器时会看到它。
$(document).ready(function(){
$('#menuToggle').click(function(){
if($('body').hasClass('open')){
sessionStorage.removeItem('body');
}else{
sessionStorage.setItem('body', 'open');
}
});
if(sessionStorage.getItem('body')){
$('body').addClass('open');
}else{
$('body').removeClass('open');
}
});.sidebar{
width: 0;
background-color: #222;
height: 200px;
}
body.open .sidebar{
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button id="menuToggle">Toggle</button>
<div class="sidebar"></div>
</body>