即使重定向到另一个页面后如何保持侧边栏折叠答案

【问题标题】：How to keep sidebar collapsed even after redirecting to another page即使重定向到另一个页面后如何保持侧边栏折叠
【发布时间】：2019-08-31 08:55:07
【问题描述】：

我正在构建一个管理仪表板，即使在从一个页面重定向到另一个页面后，我也希望我的侧边栏可以折叠。在第一次加载时，我想展开，但是在单击汉堡切换按钮后它会折叠，但是当我将它重定向到另一个页面时，它会展开，这是我不想要的。

如何在重定向后保持折叠状态？

在这里查看我的代码：https://jsfiddle.net/jgh2cnsa/

$(document).ready(function(){
    $('.hamburger').on('click',function(){
        $('#side-bar').toggleClass("side-bar-toggle");
        $('.menu-container ul').toggleClass('menu-container-toggle');
        $('.side-text').toggleClass('side-text-toggle');
        $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
        $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
        $('#right-section').toggleClass('right-section-toggle');
        $('#nav').toggleClass('nav-toggle');
        $('.container').toggleClass('container-toggle');
    });
});

你可以在这里看到结果：- https://jsfiddle.net/jgh2cnsa/

【问题讨论】：

打开/折叠是一种状态，您需要存储该状态并在“就绪”时访问它。可以存储在 sessionStorage、localStorage 中，可以存储为 url 查询字符串参数，可以将状态发布到服务器并检索...
你能提供代码吗..如果你能？？

标签： jquery html css

【解决方案1】：

这是在 sessionStorage 中保存状态的示例：

  $(document).ready(function(){
      let collapsed = sessionStorage.getItem('collapsed');
      const setCollapsedState = ( )=> {
      console.log(collapsed);
          if(collapsed === "open"){
              $('#side-bar').addClass("side-bar-toggle");
              $('.menu-container ul').addClass('menu-container-toggle');
              $('.side-text').addClass('side-text-toggle');
              $('.fa-angle-right').addClass('fa-angle-right-toggle');
              $('.menu-container ul li a').addClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').addClass('right-section-toggle');
              $('#nav').addClass('nav-toggle');
              $('.container').addClass('container-toggle');
          } else {
              $('#side-bar').removeClass("side-bar-toggle");
              $('.menu-container ul').removeClass('menu-container-toggle');
              $('.side-text').removeClass('side-text-toggle');
              $('.fa-angle-right').removeClass('fa-angle-right-toggle');
              $('.menu-container ul li a').removeClass('menu-container-ul-ul-i-a-toggle');
              $('#right-section').removeClass('right-section-toggle');
              $('#nav').removeClass('nav-toggle');
              $('.container').removeClass('container-toggle');
          }
      }

      setCollapsedState( );
      $('.hamburger').on('click',function(){
            console.log(collapsed);
          sessionStorage.setItem('collapsed', (collapsed==="open"?"closed":"open"));
          collapsed = sessionStorage.getItem('collapsed');
          console.log(collapsed);
          $('#side-bar').toggleClass("side-bar-toggle");
          $('.menu-container ul').toggleClass('menu-container-toggle');
          $('.side-text').toggleClass('side-text-toggle');
          $('.fa-angle-right').toggleClass('fa-angle-right-toggle');
          $('.menu-container ul li a').toggleClass('menu-container-ul-ul-i-a-toggle');
          $('#right-section').toggleClass('right-section-toggle');
          $('#nav').toggleClass('nav-toggle');
          $('.container').toggleClass('container-toggle');
      });
  });

希望这能证明这个想法，因为它适用于任何存储方法。

【讨论】：