Javascript 如何使导航栏在单击按钮时增长和收缩

我有一个简单HTML和SCS的导航栏，我想让它可以折叠，例如，我会在导航栏的侧面有一个小按钮，当点击时，导航栏会增长以显示元素（图标和标题），当再次点击时，导航栏会收缩，只显示图标，我如何实现这样的功能

.page容器{
显示器：flex；
身高：100%；
背景：白色；
}
.侧边栏{
身高：100%；
宽度：300px；
背景：rgba（0,0,0,0.8）；
}
.清单项目{
填充顶部：100px；
}
.清单项目{
显示器：flex；
字体大小：20px；
颜色：白色；
填充：10px 20px；
颜色：rgba（255，255，255，0.85）；
光标：指针；
位置：相对位置；
}
.list-item.selected{
颜色：白色；
}
。列表项：悬停{
颜色：#51bbe5；
}
.列表项：悬停：：之前{
不透明度：0.35；
变换：scaleY（0.5）scaleX（2）；
}
.列表项：：之前{
内容：“；
位置：绝对位置；
身高：100%；
宽度：3倍；
排名：0；
左：0；
背景色：#51bbe5；
/*默认情况下，将“不透明度”设置为0*/
不透明度：0；
变换：scaleY（0）；
过渡：变换0.2s，不透明度0.2s；
}
.列表项.所选：：之前{
不透明度：1；
变换：scaleY（1）；
}
.列表项span.材料-图标-概述{
右边距：12px；
}
.页面内容容器{
填充：50px；
}

寻找新的对帐来源
来源报告历史
驱动器\u文件夹\u上载文件历史记录
说明注销

1.创建一个按钮，单击该按钮可执行此显示隐藏操作

单击按钮时，检查菜单是否可见，然后隐藏，如果隐藏，则显示

最初我将其隐藏，您可以通过css将其反转，无需更改jQuery代码，它是以某种方式编写的，无论最初是隐藏还是可见，它都可以工作

如果需要其他信息，请随时发表评论

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
如果（$（this）.next（）是（':visible'））{
$（this.next（）.slideUp（）；
$（'.show'）.show（）；
$（'.hide'）.hide（）；
}否则{
$（this.next（）.slideDown（）；
$（'.show'）.hide（）；
$（'.hide'）.show（）；
}
});
});
.page容器{
显示器：flex；
身高：100%；
背景：白色；
}
.侧边栏{
身高：100%；
宽度：300px；
背景：rgba（0,0,0,0.8）；
}
.清单项目{
填充顶部：100px；
显示：无；
}
.清单项目{
显示器：flex；
字体大小：20px；
颜色：白色；
填充：10px 20px；
颜色：rgba（255，255，255，0.85）；
光标：指针；
位置：相对位置；
}
.list-item.selected{
颜色：白色；
}
。列表项：悬停{
颜色：#51bbe5；
}
.列表项：悬停：：之前{
不透明度：0.35；
变换：scaleY（0.5）scaleX（2）；
}
.列表项：：之前{
内容：“；
位置：绝对位置；
身高：100%；
宽度：3倍；
排名：0；
左：0；
背景色：#51bbe5；
/*默认情况下，将“不透明度”设置为0*/
不透明度：0；
变换：scaleY（0）；
过渡：变换0.2s，不透明度0.2s；
}
.列表项.所选：：之前{
不透明度：1；
变换：scaleY（1）；
}
.列表项span.材料-图标-概述{
右边距：12px；
}
.页面内容容器{
填充：50px；
}
.showHide.hide{
显示：无；
}

显示+隐藏-
寻找新的对帐来源
来源报告历史
驱动器\u文件夹\u上载文件历史记录
说明注销
我假设您正在使用引导

在引导中，您需要以下文件：

bootstrap.min.css
jquery.js
bootstrap.min.js
按这个顺序。jquery文件是使引导按钮下拉和折叠所需的文件

通常我会从入门样板文件中复制代码，然后将资产下载到本地进行开发。
如果默认情况下只显示图标，请添加

.material-icons-outlined {
        display: none;
    }

添加到样式表文件，并在html文件中添加按钮

<button onclick="myFunction()">Click</button>

看起来您提供的代码不完整。“小按钮”在哪里？您是否使用JS触发菜单？请阅读。嘿@因为这个小按钮只是一个澄清所需输出的示例，这个想法是我将使用一个按钮，而不是像悬停这样的东西。。；嘿，@Atul Rajput谢谢你的回答，但我问的是如何实现可折叠边栏，而不是下拉菜单…NP sohail，我很乐意提供帮助，但你能不能解释一下“可折叠边栏”，你希望它的行为。只有图标，在你的问题中，我得到了你需要的，并将其添加到答案中，挂好
<a class="list-item">
   <span class="material-icons-outlined"> source </span>New reconciliation
</a>

<a  class="list-item"> icon 1 
<span class="material-icons-outlined"> source New reconciliation</span>
                </a>
                <a class="list-item"> icon 2 
                    <span class="material-icons-outlined"> source Reports history</span>
</a>

function myFunction() {
                var x = document.getElementsByClassName("material-icons-outlined");
                if (x[0].style.display === "block") {
                    x[0].style.display = "none";
                    x[1].style.display = "none";
                    x[2].style.display = "none";
                    x[3].style.display = "none";
                } else {
                    x[0].style.display = "block";
                    x[1].style.display = "block";
                    x[2].style.display = "block";
                    x[3].style.display = "block";
                }
            }