Javascript 使用jquery和css制作类似AdminLTE的折叠边栏

我想做一个像这样的折叠侧栏

但我有个问题。如何使用CSS和jQuery

我试过这个，但不起作用

这是我的名片

$（文档）.ready（函数（）{
var acc=document.getElementsByClassName（“导航”）；
var i；
对于（i=0；i
。侧栏{
显示：内联块；
最大宽度：225px；
身高：100%；
位置：绝对位置；
背景色：#3A3A；
过渡：0.5s缓进缓出；
}
.navigation.active{
背景色：红色；
/*背景图片：url(https://1.bp.blogspot.com/-VbfWt8Zlo8s/V7GrsnNyI3I/AAAAAAAAD_0/vzR5BsD0fgoQ7nHtcNjaDt9F0kyYhUeLACLcB/s1600/3lines.png);
背景尺寸：55px；
背景位置：中心；
背景重复：无重复*/
光标：指针；
大纲：无；
边界：无；
宽度：75px；
高度：100px；
}
.导航{
宽度：225px；
高度：100px；
背景色：#555555；
光标：指针；
大纲：无；
边界：无；
过渡：0.5s缓进缓出；
}
.名单{
不透明度：1；
最大宽度：225px；
溢出：隐藏；
过渡：0.5s缓进缓出；
}
.list.show{
不透明度：1；
最大宽度：75px；
}
.线路{
填充：25px；
颜色：#FFFFFF；
/*字体大小：30px；
字体系列：Arial*/
空白：nowrap；
}
.线路{
填充：25px；
颜色：#FFFFFF；
/*字体大小：30px；
字体系列：Arial*/
空白：nowrap；

管理员
菜单

menuLine 1
menuLine 2
menuLine 3
menuLine 4
menuLine 5

链接不起作用。请在问题中包含代码的关键位。添加了代码段，修复了代码笔链接