Css 切换菜单侧边栏不能很好地用于引导折叠

我试图创建一个有两级子菜单的切换侧栏菜单。每当菜单很小时，我就应用class

mini menu

，然后我想使用bootstrap collapse来显示子菜单，而不是鼠标悬停，但效果不好

这是：

$（文档）.ready（函数（）{
$（'.menu toggler'）。单击（函数（）{
$（'aside，nav.vertical'）。toggleClass（'mini-menu'）；
$（'.first-level menu'）。parents（'a'）。toggleClass（'mini-menu'）；
$（'.first level menu'）。toggleClass（'hide'）；
$（'aside'）.find（'ul'）.toggleClass（'collapse'）；
$（'aside'）.find（'ul'）.toggleClass（'collapse'）；
})
});
*{
填充：0；
保证金：0；
}
/*正文{font:16px/1无衬线}*/
身体{
字体大小：13px；
}
/*垂直菜单*/
垂直导航{
位置：相对位置；
宽度：240px；
}
/*全部保险商实验室*/
垂直导航{
列表样式：无；
}
/*全李*/
导航垂直线{
位置：相对位置；
}
/*全是*/
垂直导航{
显示：块；
颜色：#555；
文字装饰：无；
填充：25px 14px；
背景：#FFF；
宽度：212px；
高度：25px；
}
/*一切都在盘旋*/
垂直导航{
左侧填充：23px；
}
导航垂直子菜单标题{
显示：无；
}
/*内牛皮*/
导航迷你菜单{
位置：绝对位置；
左：0%；
排名：0；
宽度：224px；
可见性：隐藏；
不透明度：0；
}
/*内部UL显示*/
导航迷你菜单li：悬停>ul{
左：100%；
能见度：可见；
不透明度：1；
}
导航迷你菜单{
位置：相对位置；
可见性：隐藏；
左：0！重要；
}
导航迷你菜单子菜单标题{
显示：块！重要；
}
a、 有子菜单：后{
字体系列：“字体真棒5免费”；
内容：“\f105”；
位置：绝对位置；
右：10px；
顶部：26px；
}
/*顶栏*/
#顶栏{
背景：#1F466D！重要；
高度：40px！重要；
}
#顶栏a{
字体系列：“开放式SAN”；
字体风格：普通；
字号：600；
字体大小：14px；
线高：19px；
颜色：#FFFFFF；
}
.erp文本{
左边距：12px；
/*两者都必须在波托提昂*/
右边距：84px；
/*两者都必须在波托提昂*/
}
.左图标{
右边距：12.5px；
}
#用户配置文件{
位置：相对位置；
高度：114px；
背景：url（'profile-bg.jpg'）不重复；
}
#用户信息{
位置：绝对位置；
顶部：10px；
左：10px；
宽度：95%；
颜色：#fff；
}
#用户信息{
宽度：60px；
浮动：左；
右边距：15px；
}
.displayname{
字号：700；
}
.用户角色{
字号：500；
}
#应用程序名称{
位置：绝对位置；
底部：8px；
宽度：100%；
高度：30px；
背景：rgba（255,255,255,0.5）；
}
#应用程序名称p{
填充：5px14px；
颜色：#4187C9；
字体大小：粗体；
}
.垂直#应用程序名称p.app-short{
显示：无；
}
#注销{
位置：绝对位置；
右：10px；
顶部：7px；
颜色：#bfbf；
字体大小：15px；
}
.迷你菜单#注销{
显示：无；
}
.迷你菜单p.app-short{
显示：块！重要；
}
.迷你菜单p.app-full{
显示：无；
}
.迷你菜单#用户信息img{
宽度：40px；
}
.迷你菜单{
宽度：60px！重要；
}
.mini菜单.displayname，
.迷你菜单.用户角色{
显示：无；
}
.隐藏{
可见性：隐藏；
}

文件