Javascript 创建侧栏导航菜单

我想在侧边栏导航应用程序中创建一个菜单。 我试着去创造，但是结果从来都不是我所期望的。 也许问题出在图书馆或者缺少一些图书馆。 这是我的疑问之一，我将我正在使用的库与代码放在一起：

因此，我有以下代码和库：

$（文档）.ready（函数（）{
//展开和折叠导航
$（'.toggle'）。打开（'click'，function（）{
$（“#kd主导航”）.toggleClass（'open'）；
});
//导航项目
$（'.item'）。每个（函数（）{
var me=$（此）；
me.on（'click'，function（）{
console.log（me）；
if（me.hasClass（'has-menu'））{
//隐藏所有打开的导航菜单
$（'.item'）。不是（这个）。每个（函数（）{
if（$（this）.hasClass（'show-menu'））{
$（this.toggleClass（'show-menu'）；
}
});
//显示/隐藏此项菜单
//聚焦/取消聚焦此项目
me.toggleClass（“显示菜单”）；
me.toggleClass（“聚焦”）；
}否则{
$（'.item'）。每个（函数（）{
//清除所有活动项
if（$（this）.hasClass（'active'））{
$（this.toggleClass（'active'）；
}
//关闭所有菜单
if（$（this）.hasClass（'show-menu'））{
$（this.toggleClass（'show-menu'）；
}
});
//使此项目处于活动状态
me.addClass（'active'）；
}
});
});
//菜单项
$（'.menu'）。查找（'.subitem'）。每个（函数（）{
//可点击项目
if（！$（this）.hasClass（'no-cursor'））{
$（此）。单击（函数（e）{
e、 stopPropagation（）；//防止父导航项单击事件
$（'.item'）。每个（函数（）{
//清除所有活动菜单项
if（$（this）.hasClass（'active'））{
$（this.toggleClass（'active'）；
}
//单击菜单项后关闭所有打开的菜单
if（$（this）.hasClass（'show-menu'））{
$（this.toggleClass（'show-menu'）；
}
});
//将此菜单项的父项设置为活动项
$（this.parent（）.parent（）.addClass（'active'）；
}); 
}
});
});
.kd-p-l-10{
左侧填充：10px；
}
html，
身体{
身高：100%；
}
身体{
填充：0；
保证金：0；
}
.kd主导航{
z指数：2；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：60px；
背景色：rgba（35,71,103,1）；
显示器：flex；
弯曲方向：立柱；
调整项目：灵活启动；
左侧填充：7px；
框大小：边框框；
长方体阴影：0 rgba（0,0,0,0）；
过渡：宽度.2s，框阴影.2s；
.内部{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
弹性：100；
最小高度：490px；
}
标志
.切换，
.mainnav.项目{
宽度：45px；
高度：45px；
最小宽度：45px；
最小高度：45px；
边界半径：4px；
光标：指针；
边缘顶部：10px；
}
.标志{
过渡：宽度为0.2s；
自我校准：灵活启动；
背景色：#f00；
}
.切换{
字体系列：“fontawesome”；
颜色：#fff；
字体大小：22px；
自我校准：灵活启动；
过渡：宽度.2s，高度.2s，边距底部.2s，边距顶部.2s；
@媒体屏幕和屏幕（最大高度：680px）{
宽度：30px；
高度：30px；
最小宽度：30px；
最小高度：30px；
左边距：7px；
}
.酒吧，
.结束{
线高：45px；
宽度：45px；
高度：45px；
最小宽度：45px；
最小高度：45px；
文本对齐：居中；
@媒体屏幕和屏幕（最大高度：680px）{
宽度：30px；
高度：30px；
最小宽度：30px；
最小高度：30px；
线高：30px；
}
}
.结束{
显示：无；
}
}
.项目{
颜色：#fff；
光标：指针；
长方体阴影：0 rgba（0,0,0,0）；
过渡：宽度.2s，高度.2s，页边距底部.2s，页边距顶部.2s，背景色.2s，框阴影.2s；
显示器：flex；
溢出：隐藏；
位置：相对位置；
.字形{
字体系列：“FontAwesome”；
字体大小：22px；
宽度：45px；
最小宽度：45px；
高度：45px；
最小高度：45px；
线高：45px；
文本对齐：居中；
-webkit字体平滑：抗锯齿；
字体平滑：抗锯齿；
字体平滑：始终；
转换：宽度.2s，高度.2s，行高.2s，字体大小.2s；
@媒体屏幕和屏幕（最大高度：680px）{
宽度：30px；
高度：30px；
最小宽度：30px；
最小高度：30px；
线高：30px；
字体大小：16px；
}
}
.标签{
字体系列：“OpenSans”、Helvetica、Arial、无衬线字体；
字体大小：14px；
空白：nowrap；
线高：45px；
左边距：10px；
不透明度：0；
转变：不透明度；
右边填充：10px；
@媒体屏幕和屏幕（最大高度：680px）{
线高：30px；
右侧填充：5px；
}
}
&：悬停{
背景色：rgba（6716216,1）；
盒影：0 3px 6px rgba（0,0,0,0.37）；
z指数：10；
}
&：非（.show menu）：悬停{
宽度：自动；
最小宽度：自动；
.标签{
不透明度：1；
}
}
&.主动{
背景色：#fff；
颜色：rgba（54111160,1）；