Css 带有可折叠列表的覆盖菜单在单击时消失

我正在为我的网站使用覆盖菜单。我还在菜单上应用了一些可折叠的功能来显示子菜单。我的问题是，当我点击主菜单显示子菜单时，整个覆盖菜单消失了。我想不出我们的团队是如何解决这个问题的。我使用的是Bootstrap4.1.0

请帮忙

这是我的密码

//菜单覆盖
$（文档）.ready（函数（）{
$（“#导航图标”）。单击（函数（）{
$（此）.toggleClass（“动画图标”），$（“#覆盖”）.fadeToggle（）
})
})，$（文档）.ready（函数（）{
$（“#覆盖”）。单击（函数（）{
$（“#导航图标”）.removeClass（“动画图标”），$（“#覆盖”）.toggle（）
})
});
//显示子菜单
var coll=document.getElementsByClassName（“子菜单”）；
var i；
对于（i=0；i

#导航图标{
位置：绝对位置；
顶部：30px；
右：30px；
宽度：30px；
高度：28px；
z指数：10；
光标：指针；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
过渡：.5s易进易出；
}
#导航图标跨度{
位置：绝对位置；
显示：块；
宽度：100%；
高度：4px；
背景色：#be9bba；
边界半径：9px；
不透明度：1；
左：0；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.35秒易入易出；
转换：.35秒轻松输入输出；
}
#导航图标跨度：第n个子（1）{
顶部：0px；
}
#导航图标跨度：第n个子（2）{
顶部：10px；
}
#导航图标跨度：第n个子（3）{
顶部：20px；
}
#导航图标。动画图标跨度：第n个子（1）{
顶部：10px；
-webkit变换：旋转（135度）；
变换：旋转（135度）；
}
#导航图标。动画图标跨度：第n个子（2）{
不透明度：0；
左：-60px；
}
#导航图标。动画图标跨度：第n个子（3）{
顶部：10px；
-webkit变换：旋转（-135度）；
变换：旋转（-135度）；
}
#覆盖层{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
/*叠加定位*/
显示：无；
位置：绝对位置；
左：0；
排名：0；
z指数：8；
宽度：100%；
填充顶部：100px；
身高：100%；
背景：rgba（0,0,0,0.9）；
}
#覆盖ul{
保证金：0；
填充：0；
列表样式：无；
}
#李国宝{
填充：10px0；
}
#李安{
颜色：#fff；
字体大小：200%；
字母间距：5px；
文本转换：大写；
字体系列：“Yanone Kaffeesatz”，无衬线；
}
#李娜：悬停{
颜色：#ccc；
文字装饰：无；
}
.子菜单内容{
最大高度：0；
字体大小：11px；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

您需要删除覆盖的JS函数，这将解决问题。理想情况下，除非有人单击“关闭”按钮，否则您不想关闭菜单

//菜单覆盖
$（文档）.ready（函数（）{
$（“#导航图标”）。单击（函数（）{
$（this）.toggleClass（“动画图标”）
$（“#覆盖”）.fadeToggle（）
})
});
//显示子菜单
var coll=document.getElementsByClassName（“子菜单”）；
var i；
对于（i=0；i

#导航图标{
位置：绝对位置；
顶部：30px；
右：30px；
宽度：30px；
高度：28px；
z指数：10；
光标：指针；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.5s轻松输入输出；
过渡：.5s易进易出；
}
#导航图标跨度{
位置：绝对位置；
显示：块；
宽度：100%；
高度：4px；
背景色：#be9bba；
边界半径：9px；
不透明度：1；
左：0；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：.35秒易入易出；
转换：.35秒轻松输入输出；
}
#导航图标跨度：第n个子（1）{
顶部：0px；
}
#导航图标跨度：第n个子（2）{
顶部：10px；
}
#导航图标跨度：第n个子（3）{
顶部：20px；
}
#导航图标。动画图标跨度：第n个子（1）{
顶部：10px；
-webkit变换：旋转（135度）；
变换：旋转（135度）；
}
#导航图标。动画图标跨度：第n个子（2）{
不透明度：0；
左：-60px；
}
#导航图标。动画图标跨度：第n个子（3）{
顶部：10px；
-webkit变换：旋转（-135度）；
变换：旋转（-135度）；
}
#覆盖层{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
/*叠加定位*/
显示：无；
位置：绝对位置；
左：0；
排名：0；
z指数：8；
宽度：100%；
填充顶部：100px；
身高：100%；
背景：rgba（0,0,0,0.9）；
}
#覆盖ul{
保证金：0；
填充：0；
列表样式：无；
}
#李国宝{
填充：10px0；
}
#李安{
颜色：#fff；
字体大小：200%；
字母间距：5px；
文本转换：大写；
字体系列：“Yanone Kaffeesatz”，无衬线；
}
#李娜：悬停{
颜色：#ccc；
文字装饰：无；
}
.子菜单内容{
最大高度：0；
字体大小：11px；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}