Question

继续question I posted the other day，得到了令人满意的回答。

我正在使用localstorage来调用“折叠”或“扩展”侧栏的选定状态。但是，在重新加载具有“折叠”大小的页面时，边栏首先以全宽加载，然后在其余页面加载时转换为折叠。

这是我正在使用的jsfiddle（但是，此处未显示css / javascript延迟问题，因此我认为这仅供参考）。

$('document').ready(function() {
  // Code responsible for setting localStorage and toggling when toggle button is clicked.
  $('.collapse-toggle').on('click', function(e) {
    localStorage.setItem('menu-closed', !$('#sidebar-wrapper').hasClass('collapsed'));
    $('#sidebar-wrapper').toggleClass('collapsed');
  });

  // Code responsible for reading the state of the menu out of localStorage
  var state = localStorage.getItem('menu-closed');

  // When localStorage is not set, open the menu.
  if (state === null) {
    $('#sidebar-wrapper').removeClass('collapsed');
  } else {
    // When localStorage is set, Save the state to the variable closed
    // Here set closed to a boolean true/false value instead of a string "true" or "false"          
    var closed = state === "true" ? true : false;
    $('#sidebar-wrapper').addClass('collapsed');
    // When the state of the menu is not closed, remove the collapsed class from the sidebar.
    if (!closed) {
      $('#sidebar-wrapper').removeClass('collapsed');
    }
  }
});

我尝试将JS尽可能地移至CSS上方，但无济于事。我曾考虑过在两个完全不同的侧边栏div之间进行交换，在切换选择上隐藏相对的侧边栏div，但是后来我错过了一个不错的CSS过渡，感觉这不是最干净的解决方案。

我该怎么办？

在JS造成不良影响之前加载CSS

0 个答案: