Javascript 在处理嵌套溢出时，如何显示正确的滚动条？

当您单击

服务

菜单项时，一切正常，但父项的滚动条显示在子项的滚动条顶部。我仍然能够在子菜单中正确地滚动，但是这不是可见滚动条所模拟的

当我移除

溢出时：自动

从

.sidebar

容器中，子菜单滚动正常，但父菜单不正常

如何确保可见滚动条用于激活的菜单

（函数（$）{
var边栏=$（'.sidebar'）；
var menu=sidebar.find（'>ul，>div>ul'）；
//子菜单
（功能（）{
如果（！sidebar.length | | |！menu.children（）.length | |！menu.length）{
返回；
}
var haschilds=menu.find（'.has children>a'）；
var goBack=menu.find（'.go back'）；
var toggleSub=函数（e）{
e、 预防默认值（）；
var_this；
如果（！$（e.target）.最近（'.返回'）.长度）{
_this=$（this）；
}否则{
_this=$（this）.closest（'.sub-menu'）.prev（）；
}
_this.find（“~.sub-menu”）.toggleClass（'active'）；
_this.closest（'ul'）.toggleClass（'slide out'）；
};
hasChildren.on（'click'，toggleSub）；
goBack.on（'click'，toggleSub）；
} ) ();
}）（jQuery）
html，正文{
身高：100%；
背景:#f5；
字体系列：Arial，Helvetica，Helvetica Neue，无衬线；
}
.侧边栏{
位置：固定；
排名：0；
左：0；
宽度：280px；
身高：100%；
背景:#fe6570 ;；
盒影：2px 0px 4px 0px rgba（50,50,50,0.5）；
溢出：自动；
}
.侧边栏ul li a{
显示：块；
填充：0 1rem；
颜色：rgba（255，255，255，0.8）；
线高：3.5雷姆；
文本转换：大写；
文字装饰：无；
边框底部：1px实心rgba（230,230,230,0.2）；
转换：转换0.3s轻松输入输出；
}
.侧栏ul.有子项>a{
位置：相对位置；
}
.侧边栏ul.有孩子>a:之后，
.侧边栏.返回>a:之前{
内容：“›”；
位置：绝对位置；
字体大小：1.5rem；
右：1rem；
}
.侧边栏.返回>a:之前{
内容:""",；
位置：相对位置；
右：首字母；
左：0；
右边距：10px；
}
.侧边栏.子菜单{
位置：固定；
z指数：1；
排名：0；
左：0；
身高：100%；
宽度：280px；
背景：#fe8065；
转换：转换0.3s轻松输入输出；
转化：translateX（-100%）；
}
.侧边栏{
溢出y：自动；
列表样式：无；
填充：0；
}
.sidebar.sub-menu.active{
变换：translateX（0）；
}
.侧边栏.滑出>li>a{
转化：translateX（100%）；
}



















简单，将
.sidebar
元素从
溢出：自动至
溢出：打开服务子菜单时隐藏，如下所示：


（函数（$）{
var边栏=$（'.sidebar'）；
var menu=sidebar.find（'>ul，>div>ul'）；
//子菜单
（功能（）{
如果（！sidebar.length | | |！menu.children（）.length | |！menu.length）{
返回；
}
var haschilds=menu.find（'.has children>a'）；
var goBack=menu.find（'.go back'）；
var toggleSub=函数（e）{
e、 预防默认值（）；
var_this；
如果（！$（e.target）.最近（'.返回'）.长度）{
_this=$（this）；
}否则{
_this=$（this）.closest（'.sub-menu'）.prev（）；
}
_this.find（“~.sub-menu”）.toggleClass（'active'）；
_this.closest（'.sidebar'）.toggleClass（'overflow off'）；
_this.closest（'ul'）.toggleClass（'slide out'）；
};
hasChildren.on（'click'，toggleSub）；
goBack.on（'click'，toggleSub）；
} ) ();
}）（jQuery）
html，正文{
身高：100%；
背景:#f5；
字体系列：Arial，Helvetica，Helvetica Neue，无衬线；
}
.侧边栏{
位置：固定；
排名：0；
左：0；
宽度：280px；
身高：100%；
背景:#fe6570 ;；
盒影：2px 0px 4px 0px rgba（50,50,50,0.5）；
溢出：自动；
}
.溢出{
溢出：隐藏；
}
.侧边栏ul li a{
显示：块；
填充：0 1rem；
颜色：rgba（255，255，255，0.8）；
线高：3.5雷姆；
文本转换：大写；
文字装饰：无；
边框底部：1px实心rgba（230,230,230,0.2）；
转换：转换0.3s轻松输入输出；
}
.侧栏ul.有子项>a{
位置：相对位置；
}
.侧边栏ul.有孩子>a:之后，
.侧边栏.返回>a:之前{
内容：“›”；
位置：绝对位置；
字体大小：1.5rem；
右：1rem；
}
.侧边栏.返回>a:之前{
内容:""",；
位置：相对位置；
右：首字母；
左：0；
右边距：10px；
}
.侧边栏.子菜单{
位置：固定；
z指数：1；
排名：0；
左：0；
身高：100%；
宽度：280px；
背景：#fe8065；
转换：转换0.3s轻松输入输出；
转化：translateX（-100%）；
}
.侧边栏{
溢出y：自动；
}
.sidebar.sub-menu.active{
变换：translateX（0）；
}
.侧边栏.滑出>li>a{
转化：translateX（100%）；
}





















这非常完美，解决了我面临的许多问题。但是进一步嵌套的项目呢？比如说：。。当我切换到第二级时，溢出类从侧边栏中退出，需要