Question

我正在建立一个管理仪表板，即使在从一个页面重定向到另一页面后，我也希望在其中折叠边栏。初次加载时，我想进行扩展，但是单击“汉堡包”切换按钮后，它会折叠，但是当我将其重定向到另一个页面时，它会被扩展，这是我不想要的。

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

在此处检查我的代码：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/

Answer 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');
      });
  });

希望这可以说明该想法，因为它适用于任何存储方法。

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

1 个答案: