Question

我已在rails项目中安装了sufee管理仪表板。模板页面为here。演示是here

它与演示中的一样正常。

这是切换代码：

$('#menuToggle').on('click', function(event) {
    $('body').toggleClass('open');
});

您会注意到，导航到新页面时，即使折叠了侧边栏，它也会打开。我希望它保持崩溃状态。与打开状态相同，如果它是打开的并且我导航到新页面，则它应该保持打开状态。换句话说，只有在单击切换开关时，侧栏状态才应更改。我该如何实现？

Answer 1

您可以尝试以下方法：

$('#menuToggle').off('click').on('click', function(event) {
  $('body').toggleClass('open');
});

Answer 2

检查站点并查看其行为，您必须在body标签中添加class =“ open”，仅此而已

Answer 3

如果侧边栏的默认状态为打开，则在任何非动态页面加载中，它将打开。您需要引入某种持久性数据存储来存储当前用户的当前状态。

最常见的选择是在同一click事件上设置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');
}

Answer 4

也许您可以尝试这种方法。只是为了弄清楚这个想法，顺便说一句，代码段中的错误是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>

管理模板，避免重新加载时打开侧边栏

4 个答案: