jquery - Bootstrap 4 可折叠侧边栏，页面重新加载时保持不变

Question

我想以此作为序言，英语不是我的母语，如果我的任何解释含糊或没有意义，请告诉我，我会尽力使它们更清晰。

我正在使用可折叠侧边栏(基于 tutorial by Bootstrapious )，并且我拼凑了一些 js (基于 this codepen )来保存侧边栏的当前切换状态，以使其在重新加载之间保持不变。

var sidebarState = window.localStorage.getItem('sidebarState');

windowWidth = $(window).width();

$(window).resize(function() {
  windowWidth = $(window).width();

    if(sidebarState){
        $('#sidebar').addClass('sidebar-collapsed').removeClass('sidebar-expanded'); 
    }
    else{
        $('#sidebar').addClass('sidebar-expanded').removeClass('sidebar-collapsed'); 
    }
});

$(function() {

    if (sidebarState == "collapsed"){
        $('#sidebar').addClass('sidebar-collapsed').removeClass('sidebar-expanded');
    }
    else{
        if(sidebarState){
        $('#sidebar').addClass('sidebar-collapsed').removeClass('sidebar-expanded'); 
        }
        else{
            $('#sidebar').addClass('sidebar-expanded').removeClass('sidebar-collapsed'); 
        }
    }

    $('#sidebarCollapse').on('click', function(){
        if ( !($('#sidebar').hasClass('sidebar-collapsed')) ) {
            $('#sidebar').addClass('sidebar-collapsed').removeClass('sidebar-expanded');
            window.localStorage.setItem('sidebarState', 'collapsed')
        }
        else{
            $('#sidebar').addClass('sidebar-expanded').removeClass('sidebar-collapsed');
            window.localStorage.removeItem('sidebarState')
        }
        return false;
    });
});

当侧边栏折叠然后重新加载页面时，如何隐藏过渡？就目前情况而言，您将看到从展开到折叠的转变，这会带来非常烦人的体验。我尝试从样式表中完全删除过渡，但这并没有产生很大的区别。任何帮助将不胜感激。

代码笔链接:https://codepen.io/anon/pen/eLjwpE

Answer 1

结果符合预期，因为 DOM 已经呈现，您只需对其进行更改。您可能需要考虑切换到 React 或 Vue

当前问题的快速修复是让包装器 最初不显示，直到您从本地存储检索到有关折叠/展开类分配的信息，然后最终使用 $( '.wrapper').css("display", "flex"); 恢复正常显示

Codepen: https://codepen.io/anon/pen/PdBMQJ