Fatal编程技术网
  • javascript/
  • Javascript 侧边栏折叠一秒钟并在页面加载时展开

Javascript 侧边栏折叠一秒钟并在页面加载时展开

javascript html jquery css

Javascript 侧边栏折叠一秒钟并在页面加载时展开,javascript,html,jquery,css,Javascript,Html,Jquery,Css,我有一个侧边栏，它可以在点击按钮时展开或折叠。现在，我已经成功地将它的状态存储在localStorage中，它工作正常，只是有一个小问题 当页面加载且localStorage中没有保存状态时，侧边栏会在瞬间折叠，然后展开Expand应该是默认状态。我不希望它先折叠，然后展开。我只想用扩展的边栏加载页面 我一直试图用自己的代码解决这个问题。但它不起作用，然后我将我的代码与SO的帖子结合起来。它仍然不起作用 完整代码： 下面是代码（请注意，localStorage在SO中不起作用）： $（'doc

我有一个侧边栏，它可以在点击按钮时展开或折叠。现在，我已经成功地将它的状态存储在
localStorage
中，它工作正常，只是有一个小问题

当页面加载且
localStorage
中没有保存状态时，侧边栏
会在瞬间折叠
，然后
展开
<当
localStorage
中没有存储状态时，code>Expand应该是默认状态。我不希望它先
折叠
，然后
展开
。我只想用扩展的边栏
加载页面

我一直试图用自己的代码解决这个问题。但它不起作用，然后我将我的代码与SO的帖子结合起来。它仍然不起作用

完整代码：

下面是代码（请注意，
localStorage
在SO中不起作用）：



$（'document'）.ready（函数（）{
if（typeof window.isMinified==“undefined”）{
window.isMinified=false；
}
常量体=$（“#体”）；
$（“#侧边栏切换器”）。在（“单击”，函数（）{
如果（window.isMinified==false）{
//setItem（'menu-closed'，！$（body）.hasClass（“侧边栏缩小”）；
body.removeClass（“侧边栏缩小”）.addClass（“侧边栏缩小”）；
window.isMinified=true；
}否则{
//setItem（'menu-closed'，！$（body）.hasClass（“侧边栏缩小”）；
body.removeClass（“侧边栏缩小”）.addClass（“侧边栏缩小”）；
window.isMinified=false；
}
});
const state=//localStorage.getItem（'menu-closed'）；
如果（状态===null）{
$（body.removeClass（'sidebar-minified'）；
}否则{
const closed=state==“真”？真：假；
如果（！关闭）{
$（body.removeClass（'sidebar-minified'）；
}
}
});

#主体{
背景：#fff；
过渡：均为0.3秒；
}
靠边，左边边栏{
背景色：#2c0963；
高度：100vh；
}
.侧边栏缩小。左侧侧边栏{
宽度：180px；
过渡段：宽度。3英寸宽；
}
.侧边栏缩小。左侧侧边栏{
宽度：75px；
过渡段：宽度。3英寸宽；
} 
.侧边栏切换{
字体大小：300；
字体大小：15px；
光标：指针；
高度：30px；
位置：绝对位置；
左：20%；
排名：0；
}



折叠/扩展

侧边栏是从css开始扩展的。如果删除transition，您将看到侧栏在页面加载时立即展开。因此，您第一次应该设置没有转换的CSS类。
您可以通过Javascript禁用转换，并在单击事件中再次启用转换：



首先删除body标记中的类：


<body id="body" class="">
    <aside class="left-sidebar"></aside>
    <button id="sidebar-toggler" class="sidebar-toggle">Collapse/Expand</button>
</body>


上述代码中的重要更改有两个：


// in the clickevent section: change the transistion to default behaviour
document.querySelector('.left-sidebar').style.transition = 'inherit';


根据状态设置正确的类并禁用转换：


// ...

if (state === null) {

    body.addClass('sidebar-minified');

} else {

    // ...

    if (!closed) {
        body.addClass('sidebar-minified-out');
        document.querySelector('.left-sidebar').style.transition = 'none';
    }
    else {
        body.addClass('sidebar-minified');
    }

}


***更新***

我重构了代码并对其进行了一些优化。
HTML:

JS:


将动画移动到单独的类怎么样


.sidebar-animated{
   transition: width: 0.3s ease-in;
}


然后从其他任何地方删除它，然后通过超时添加该类，这样在转换完成后就可以添加它，您可以在0秒内使用useTimeout，就像这样


setTimeout(() => {
    $('aside').addClass('sidebar-animated')    
},0)


加上CSS使用特殊性来达到它的元素，所以


.sidebar-minified-out .left-sidebar {
  width: 180px;
}

.sidebar-minified .left-sidebar {
  width: 75px;
} 


应该改成这个


.sidebar-minified .left-sidebar {
  width: 75px;
} 

.sidebar-minified-out .left-sidebar {
  width: 180px;
}


因为当两个元素都在同一个元素上时，就需要后者，因为它们有相同的特殊性规则，给它最后的机会，这是我最后的选择：D

这足以使它发挥作用



这是一个有效的例子，
注意：当边栏开始崩溃时，您在管理状态方面有问题，但这与您如何处理状态有关


为什么对0使用超时？因为它将执行推到所谓的“事件循环”中，确保它在所有javascript正常代码执行后执行。
您可以通过告诉浏览器一次只重新绘制一次来最小化闪烁效果。但是，
侧栏总是有一个初始大小：标记中定义的大小

在我的示例中，我使用两个
观察者来跟踪样式和大小的更改。请注意初始的
侧栏
宽度。您可以将初始边栏宽度设置为0，或者不指定，或者可以将其样式设置为与展开的边栏相同的大小，但始终会有初始重新绘制

最后，我坚信您需要从
主体
中删除这两个初始类



$（函数（）{
/*避免如此不安全的操作错误*/
变量存储=（函数（）{
返回{
setItem:function（k，v）{try{returnlocalstorage.setItem（k，v）}catch（e）{return！1}，
getItem:function（k）{try{returnlocalstorage.getItem（k）}catch（e）{returnnull}}
}; 
})();
日志（“jquerydom就绪”）；
$（“#侧边栏切换器”）。打开（“单击”，函数（）{
var isMinified=！$（“主体”）.hasClass（“侧边栏缩小”）；
$（“正文”）
.toggleClass（“侧边栏缩小”！isMinified）
.toggleClass（“侧边栏缩小”，isMinified）；
storage.setItem（'menu-closed'，+！isMinified）；
});
var closed=+storage.getItem（'menu-closed'）；
日志（'关闭：'+！！关闭）；
$（“正文”）
.addClass（关闭？“侧栏缩小”：“侧栏缩小”）
.css（{“可见性”：“可见”}）；
});

正文{
背景：#fff；
过渡：均为0.3秒；
}
靠边，左边边栏{
背景色：#2c0963；
高度：100vh；
}
.侧边栏缩小。左侧侧边栏{
宽度：180px；
过渡段：宽度。3英寸宽；
}
.侧边栏缩小。左侧侧边栏{
宽度：75px；
过渡段：宽度。3英寸宽；
} 
.侧边栏切换{
字体大小：300；
字体大小：15px；
光标：指针；
高度：30px；
位置：绝对位置；
左：20%；
排名：0；
}



边栏状态

.sidebar-animated{
   transition: width: 0.3s ease-in;
}



setTimeout(() => {
    $('aside').addClass('sidebar-animated')    
},0)



.sidebar-minified-out .left-sidebar {
  width: 180px;
}

.sidebar-minified .left-sidebar {
  width: 75px;
} 



.sidebar-minified .left-sidebar {
  width: 75px;
} 

.sidebar-minified-out .left-sidebar {
  width: 180px;
}