Bootstrap 4可折叠侧边栏，页面重载持久性

Question

在此之前，我想说英语不是我的母语，如果我的任何解释含糊或不合理，请让我知道，我将尝试使它们更清楚。 / em>

我正在玩可折叠的侧边栏（基于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;
    });
});

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

链接到codepen：https://codepen.io/anon/pen/eLjwpE

Answer 1

结果如预期的那样，因为DOM已经渲染并且您正在对其进行更改。您可能要考虑切换到React或Vue

当前问题的快速解决方案是直到您从本地存储中检索到有关折叠/展开的类分配的信息后，才wrapper 最初不显示，然后最终使用$('.wrapper').css("display", "flex");进行还原正常显示

密码笔：https://codepen.io/anon/pen/PdBMQJ