Javascript 使用展开汉堡级别的按钮创建多级汉堡菜单

我想创建一个动画汉堡包菜单与按钮，展开下一个级别。 我知道我的代码与此相去甚远，但我完全被这个问题所困扰。不管怎样，我都会告诉你我的进步。

我从一个网站上复制了这段代码，让你对我想要的东西有一个清晰的定义

正如我所说，我完全陷入困境，非常感谢任何形式的帮助

$（'.circle plus'）。在（'click'，function（）上{
$（this.toggleClass（'opened'）；
})
var coll=document.getElementsByClassName（“汉堡”）；
var hideLinks=document.queryselectoral（'.mobilemenuitems a'）；
var i；
对于（i=0；i
正文{
边际：0px；
填充：0px；
背景：白色；
颜色：#24603c；
字体系列：Arial、Helvetica、无衬线字体；
身高：100%；
}
部分{
高度：50px；
宽度：100%；
}
/*响应式（智能手机）菜单*/
@介质（最大宽度：1000px）{
/*Bild奥本链接样式*/
.logo img{
高度：50px；
位置：固定；
浮动：左；
z指数：3；
}
.登录容器{
显示：无；
}
洛古塔里亚{
显示：无；
}
#导航{
显示：无；
}
/*普拉扎尔特男子*/
部分{
高度：50px；
宽度：100%；
背景：rgba（237,237,237,1）；
背景：-莫兹线性梯度（顶部，rgba（237237，237，1）0%，rgba（2462462462461）53%，rgba（255，255，255，1）100%）；
背景：-webkit渐变（左上，左下，颜色停止（0%，rgba（237，237，237，1）），颜色停止（53%，rgba（246，246，246，1）），颜色停止（100%，rgba（255，255，255，1））；
背景：-webkit线性梯度（顶部，rgba（237，237，237，1）0%，rgba（246，246，246，1）53%，rgba（255，255，255，1）100%）；
背景：-o-线性梯度（顶部，rgba（237237，237，1）0%，rgba（246246246，246，1）53%，rgba（255，255，255，1）100%）；
背景：-ms线性梯度（顶部，rgba（237237，237，1）0%，rgba（246246246，246，1）53%，rgba（255，255，255，1）100%）；
背景：线性梯度（到底部，rgba（237237，237，1）0%，rgba（246246246，246，1）53%，rgba（255，255，255，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#eded'，endColorstr='#ffffff'，GradientType=0）；
}
.导航{
高度：50px；
宽度：100%；
背景：#24603c；
位置：固定；
z指数：2；
}
#BurgerSpace>div>按钮{
位置：固定；
右：0px；
顶部：0px；
z指数：3；
背景：无；
}
#汉堡空间{
职位：相对！重要；
}
#空间>分区{
职位：相对！重要；
}
#空间>分区>分区{
显示：块；
边缘顶部：50px；
}
#汉堡空间{
宽度：100%；
高度：50px；
显示：块；
位置：绝对位置；
浮动：对；
右边距：0；
右边填充：0px；
衬垫顶部：-2px；
}
}
.移动空间{
显示：无；
宽度：100%；
位置：相对位置；
z指数：1；
右：0；
边缘顶部：50px；
背景：白色；
}
@介质（最小宽度：1000px）{
.移动空间{
显示：无！重要；
}
}
#MobileMufirstorder>a{
文字装饰：无！重要；
字体大小：粗体；
列表样式：无！重要；
字号：28px；
线高：28px；
身高：100%；
显示：块；
高度：28px；
填充顶部：26px；
填充底部：26px；
左侧填充：25px；
}
#MobileMufirStorder>a:悬停{
颜色：浅灰色！重要；
}
#MobileMufirStorder>a:悬停+div{
显示：块！重要；
}
#移动式冰箱{
高度：80px；
宽度：100%；
边框底部：实心2件浅灰色；
边框顶部：纯色2件浅灰色；
列表样式：无！重要；
文字装饰：无！重要；
}
.mobilemenuitems>li{
列表样式：无；
文字装饰：无；
}
.移动设备{
显示：块；
}
.MobileMuseConder{
显示：无；
}
.关闭。垂直{
过渡：所有0.5s缓进缓出；
变换：旋转（-90度）；
}
.关闭。水平{
过渡：所有0.5s缓进缓出；
变换：旋转（-90度）；
不透明度：1；
}
.打开{
不透明度：1；
}
.打开.垂直{
过渡：所有0.5s缓进缓出；
变换：旋转（90度）；
}
.打开.水平{
过渡：所有0.5s缓进缓出；
变换：旋转（90度）；
不透明度：0；
}
.circle plus{
高度：4em；
宽度：4em；
字号：1em；
不透明度：0.7；
}
.圆圈+圆圈{
位置：相对位置；
宽度：2.55em；
高度：2.5em；
}
.圆加上.圆.水平{
位置：绝对位置；
背景色：红色；
宽度：30px；
高度：5px；
左：50%；
左边距：-15px；
最高：50%；
利润上限：-2.5px；
}
.圆加上.圆.垂直{
位置：绝对位置；
背景色：红色；
宽度：5px；
高度：30px；
左：50%；
左边距：-2.5px；
最高：50%；
利润上限：-15px；
}
.汉堡包{
填充：15px 15px；
显示：内联块；
光标：指针；
过渡属性：不透明度，过滤器；
过渡时间：0.15s；
过渡时间函数：线性；
字体：继承；
颜色：继承；
文本转换：无；
背景色：透明；
边界：0；