Jquery Bootstrap 4可折叠侧边栏，页面重新加载时的持久性

首先，我想说英语不是我的母语，如果我的任何解释含糊不清或没有意义，请让我知道，我会努力让它们更清楚

我正在使用可折叠的边栏（基于a），并且我已经拼凑了一些js（基于）来保存边栏的当前切换状态，以便在重新加载之间保持持久性

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

当侧边栏被折叠，然后页面被重新加载时，如何隐藏转换？现在，你会看到从扩展到崩溃的过渡，这会带来非常烦人的体验。我试图从样式表中完全删除转换，但这并没有带来很大的区别。任何帮助都将不胜感激

---

链接到codepen:

结果与预期一致，因为DOM已经呈现，您只需对其进行更改。您可能想考虑转换为“反应”或“VUE”BR> 当前问题的快速修复方法是，在从本地存储中检索到有关折叠/扩展类分配的信息之前，首先不显示

包装器
，然后使用
$（'.wrapper'）.css（“display”，“flex”）
要恢复正常显示，请执行以下操作：