Javascript 子菜单折叠而不是飞越下拉菜单

我正在尝试将折叠功能添加到我的子菜单中，但还没有骰子。我已经研究了两种解决方案，但到目前为止没有任何效果

问题是，在桌面上，菜单有一个功能（它向侧面打开），而在移动设备上，菜单的作用就像一个下拉菜单

以下是一些图片，帮助我传达我在手机上尝试做的事情：

第一个菜单运行正常。我想要像这座立交桥一样的下拉列表

第二个菜单（绿色菜单），我想像折叠一样打开，显示它的子菜单，但仍然显示下面的蓝色菜单剩余项

**像这样**

这是一把小提琴，不确定你是否能看到移动选项。任何帮助都将不胜感激

$（'ul.first menu>li'）。单击（函数（事件）{
var li=$（本）；
var liOld=$（'ul.active'）。父项（“li”）；
var el=（event.target | | event.src元素）；
$（el）.find（'span'）.toggleClass（'arrow-down-arrow-up'）；
如果（$（'ul.active'）。长度！=0）{
$（'ul.active'）.removeClass（'active'）.slideUp（'fast'，function（）{
如果（li.index（）！=liOld.index（））{
li.children（'ul.submenu'）。slideDown（600）。addClass（'active'）；
}
});
}
否则{
$（this）.children（'ul.submenu'）.slideDown（600）.addClass（'active'）；
}
});
如果（$（窗口）.width（）<736）{
var i；
var$acc=$（'.has children'）；
$acc.click（功能（事件）{
event.stopPropagation（）；
event.preventDefault（）；
var el=（event.target | | event.src元素）；
console.log（'clicked'）；
$（this.find（'ul.submenu'）.toggle（）；
$（el）.find（'span'）.toggleClass（'arrow-down-arrow-up'）；
});
}

.bg导航{
宽度：796px；
显示器：flex；
背景色：#323232；
}
.bg nav ul{
背景色：#323232；
填充：0；
显示器：flex；
对齐项目：拉伸；
弯曲方向：立柱；
页边距底部：0；
宽度：80%；
}
.bg nav ul li{
列表样式类型：无；
文本对齐：居中；
边框底部：.5px实心#ccc；
}
.bg nav ul li a{
填充：.8rem 1rem；
文字装饰：无；
显示：块；
颜色：#fff；
字体系列：“ArialMT”、“Arial”；
字体大小：400；
字体大小：13px；
}
.bg nav ul li：悬停{
背景色：#2c3e50；
}
.bg nav ul li a:悬停{
颜色：#fff；
}
.有孩子，有孩子，有孩子{
显示：无；
宽度：100%；
位置：绝对位置；
背景色：#fff；
}
.有孩子吗{
颜色：#00A2CD；
}
.bg导航子菜单{
边框：1px实心#ccc；
}
.bg导航子菜单li{
文本对齐：左对齐；
}
.bg导航子菜单li：悬停{
背景色：#966ea2；
}
.bg导航第一个子菜单li a：悬停，
.bg导航第一个子菜单li a:活动，
.bg导航第一个子菜单li a：焦点{
颜色：#fff；
}
.bg导航箭头{
字体系列：Fontsome；
浮动：对；
}
.bg导航箭头向下：：之后{
内容：“\f107”；
字体大小：16px；
}
.bg导航箭头向上：：之后{
内容：“\f106”；
字体大小：16px；
}
.bg导航箭头右：：后{
内容：“\f105”；
字体大小：16px；
}
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：568px）{
.bg导航{
调整内容：灵活启动；
宽度：100%；
利润上限：35px；
}
.bg nav ul{
宽度：100%；
}
.bg nav ul li{
文本对齐：左对齐；
边框底部：.5px实心#ccc；
}
.bg nav.有孩子吗{
左侧填充：25px；
}
.bg nav.有子女ul.有子女ul{
显示：无；
}
.bg导航第一个子菜单{
宽度：90%；
左缘：5%；
}
}
@仅介质屏幕和（最小设备宽度：736px）{
.bg导航{
对齐项目：拉伸；
证明内容：中心；
高度：36px；
}
.bg nav.有孩子吗{
左侧填充：15px；
}
.bg nav ul{
弯曲方向：行；
证明内容：中心；
}
.bg nav ul li{
位置：相对位置；
弹性：10；
左边框：.5px实心#ccc；
}
.bg nav ul li：类型的最后一个{
右边框：.5px实心#ccc；
}
.bg导航子菜单li，
.bg导航子菜单li：类型的最后一个{
左边界：无；
边界权：无；
}
.bg nav.有子女ul.有子女ul{
左：100%；
排名：0；
}
.bg nav.有子女ul{
显示器：flex；
弯曲方向：立柱；
}
.bg导航有子级ul。有子级：悬停ul{
显示器：flex；
弯曲方向：立柱；
}
.bg导航子菜单下箭头：：后{
内容：“\f105”；
字体大小：16px；
}
}
.bg nav.有子女ul，
.子菜单，.第一个子菜单{
显示：无；
}
.阿罗{
指针事件：无；
}
.有孩子吗{
背景色：#F5；
}
.有孩子吗{
显示：无；
}
.主动{
显示：块；
}
.有孩子吗{
背景颜色：浅蓝色；
}
.有子菜单ul li.第二个子菜单li{
背景颜色：浅绿色；
}
/** {
轮廓：1px实心橙色；
}*/