使用Javascript更改类的宽度并保存状态

Change width of a class using Javascript and save State

本文关键字：保存 状态 Javascript 使用      更新时间：2023-09-26

我目前在一个网站上工作，它有一个静态的左侧边栏，通常是250像素宽，但是我遇到了一个问题，即当用户在屏幕分辨率小于1200像素的电脑上时，边栏占用了屏幕上太多的空间。

我该如何设置它，以便有一个按钮将侧边栏折叠到100px，并在他们使用网站时保存状态?然后，一旦它被折叠，就会有另一个按钮供用户将侧边栏展开回其原始状态?

另外，当用户单击折叠或展开按钮时，我不希望整个页面刷新，因为网站上有很多表单，如果页面刷新，用户将不得不重新输入所有详细信息(如果他们在表单中间单击按钮)。

任何帮助将不胜感激!

谢谢!

最好的办法是设置CSS媒体查询，这样边栏就可以在较小的屏幕上自动调整大小，而无需任何用户交互。下面是一个示例(显然，您必须将选择器替换为适用于您的页面的选择器):

@media(min-width:992px){
    .sidebar {width:150px}
}
@media(min-width:1200px){
    .sidebar {width:250px}
}
相关文章：