Javascript 如何在小屏幕上折叠边栏？

我正在制作一个固定的侧边栏，但它不会崩溃。。我真的不知道怎么做。
我在网上搜索过。。仍然找不到任何结果

这是我的sidebar.html

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
        .
        .
        .
    </ul>
</div>

我曾尝试通过JavaScript来实现它，但我不知道如何实现它。 有人可以帮忙吗？

max-width: 0;

max-width: auto;

.sidebar {
    transition: left 0.3s ease-out;
}

未折叠：

max-width: 0;

max-width: auto;

.sidebar {
    transition: left 0.3s ease-out;
}

---

您的JavaScript可能如下所示：

/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */

function openNav() 
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */

function closeNav() 
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

然后需要使用相关代码将此JS作为源代码添加到HTML中。通过创建可折叠边栏的教程

---

您可能还想看看这里的Aweasome responsive侧边栏。

您可以将属性添加到侧边栏

tranform:translateX(-100%);

当侧栏处于活动状态时，使用js和addcss添加活动类

sidebar.active{
    tranform:translateX(0%);
}

向侧栏的父级添加属性

.parent{
    overflow-x:hidden;
}

未折叠：

max-width: 0;

max-width: auto;

.sidebar {
    transition: left 0.3s ease-out;
}

通过添加类“隐藏”折叠：

.sidebar.hide {
    left: -295px;
}

---

-295px因为宽度是230px，左边距是20px，方框阴影是45px，所以可以使用css和

转换属性

在.css中：

.sidebar {
  // your current code
  left: -210px; // example
  transition: left 2s ease;
}

.sidebar:hover{
  left: 0px;
}

这将使您的div滑入超过2秒，并在不再使用hoover时解除锁定。

请看一个例子。
试试Bootstrap，它专为所有设备创建响应迅速的网站而设计，不费吹灰之力，而且你还可以找到许多其他很酷的选项
 您可以使用媒体查询来检测屏幕大小，然后以较小的大小隐藏边栏：


。侧栏{
高度：计算（100vh-90px）；
宽度：230px；
位置：固定；
排名：0；
左：0；
z指数：1；
背景尺寸：封面；
背景位置：中心；
显示：块；
背景：#408000；
盒影：0px 0px 45px 0px rgba（0,0,0,0.6）；
边缘顶部：80px；
左边距：20px；
边界半径：5px；
}
.侧栏.导航{
边缘顶部：20px；
显示：块；
}
@介质（最大宽度：400px）{
.侧边栏{
显示：无；
}
}






小屏幕上的边栏什么时候应该折叠？应该在媒体查询中吗？只是在case中添加存在的类？你可以进一步详细说明你的答案。我看过教程，但我希望它在大屏幕上可见，在小屏幕上折叠（如教程）。我无法修改它：/