基于jquery之前的父级动态设置子级样式

我想知道我是否可以用Jquery动态地为孩子们设计样式。让我解释一下。我正在制作一个移动菜单，并将其设置为每个li部分只需要儿童类，然后其中的任何ul都将成为一个儿童，当单击时，该儿童会向上/向下滑动（如手风琴）隐藏/显示选项。我可以做无数次。我想知道这些列表的背景色是否取决于它前面列表的背景色。例如，如果li儿童级别1的背景颜色为#cccc，则（动态）我希望二级li儿童认识到其父级的背景色为#cccccc，并采取措施将十六进制代码的背景色更改为#bbbbbb，三级li儿童认识到其父级的背景色为#bbbbbbbb，并采取措施将十六进制代码的背景色更改为#aaaa…等等。我的问题是做点什么。我已经分别抓住了每一个关卡，但我的问题是它们的背景色

css是从预编译器生成的，这就是它看起来很奇怪的原因。我通常少用

var haschilds=$（'.mobile options'）.find（'li>a'）；
函数关闭菜单（）{
$（“.mobile menu”）.animate（{'width'：'0'，'min-width'：'0'}，300）；
$（'body'）.css（{'overflow-y'：'auto'}）；
$（'.hamburger'）.removeClass（'open'）；
$（'.page overlay'）。淡出（300）；
//菜单关闭时，向上滑动所有打开的菜单项
if（hasChildren.hasClass（'open'））{
hasChildren.removeClass（'open'）；
hasChildren.兄弟姐妹（'ul'）.delay（300）.slideUp（'fast'）；
}
}
函数dependsOnMenuButton（）{
如果（$（'.hamburger'）.hasClass（'open'））{
$（“.mobile menu”）.animate（{'width'：'60%，'min-width'：'300px'}，300）；
$（'body'）.css（{'overflow-y'：'hidden'，'overflow-x'：'hidden'}）；
$（'.page overlay'）.fadeIn（300）；
}否则{
关闭菜单（）；
}
}
$（文档）.ready（函数（）{
$（'li'）。每个（函数（）{
if（$（this.parent（）.parent（'.children'）.length）{
$（this.children（'a'）.css（{'background'：'yellow'}）；
}
});
//允许单击汉堡容器、汉堡或汉堡>范围。
//它可以：汉堡包容器或任何儿童->切换类打开
$（“.hamburger container”）。单击（函数（）{
$（this）.children（'.hamburger'）.toggleClass（'open'）；
dependsOnMenuButton（）；
});
//手风琴码
//所有手风琴项目内容
var allPanels=$（“.mobile options”）.find（'li>ul'）；
//隐藏所有子页面列表
allPanels.hide（）；
//单击此函数可确定A标记是否具有类子级，以及是否向上/向下滑动其子级
hasChildren.click（函数（）{
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
$（this）.兄弟姐妹（'ul'）.slideUp（'fast'）；
//移除打开的类，并向上滑动任何和所有打开的具有子元素的子级
$（this.parent（'li'）。find（'li.children>a'）。removeClass（'open'）；
$（this.parent（'li'）。find（'li.children>ul'）。slideUp（'fast'）；
}else if（$（this）.parent（'li'）.hasClass（'children'））{
$（this）.兄弟姐妹（'ul'）.slideDown（'fast'）；
$（this.addClass（'open'）；
}
});
});
//如果用户在菜单外单击->关闭菜单
$（文档）。在（'单击'）上，函数（e）{
if（$（'.hamburger'）.hasClass（'open'）&&（$（'.page overlay'）.is（e.target））{
关闭菜单（）；
}
});
*{
保证金：0；
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
html，
身体{
身高：100%；
}
.添加flex{
显示器：flex；
显示：-webkit flex；
}
.页面覆盖{
背景：#333；
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
高度：100vh；
宽度：100vw；
不透明度：0.5；
显示：无；
}
.汉堡包容器{
背景：99万；
排名：0；
右：0；
位置：绝对位置；
填充：20px；
光标：指针；
z指数：2000；
}
.汉堡包容器.汉堡包{
宽度：35px；
高度：34px；
位置：相对位置；
能见度：可见；
}
.汉堡包集装箱.汉堡包跨度{
显示：块；
位置：绝对位置；
高度：6px；
宽度：100%；
背景：#fff；
不透明度：1；
左：0；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：0.25s易入易出；
-moz转换：0.25s易入易出；
-o型过渡：0.25s缓进-缓出；
过渡：0.25秒缓进缓出；
能见度：可见；
}
.汉堡容器.汉堡跨度：第n个孩子（1）{
顶部：0px；
}
.汉堡包容器。汉堡包跨度：第n个孩子（2），
.汉堡包容器.汉堡包跨度：第n个孩子（3）{
顶部：14px；
}
.汉堡包容器.汉堡包跨度：第n个孩子（4）{
顶部：28px；
}
.汉堡容器.汉堡.开口跨度：第n个孩子（1）{
顶部：14px；
宽度：0%；
左：50%；
}
.汉堡容器.汉堡.开口跨度：第n个孩子（2）{
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-o变换：旋转（45度）；
变换：旋转（45度）；
}
.汉堡容器.汉堡.开口跨度：第n个孩子（3）{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
-o变换：旋转（-45度）；
变换：旋转（-45度）；
}
.汉堡容器.汉堡.开口跨度：第n个孩子（4）{
顶部：14px；
宽度：0%；
左：50%；
}
.手机菜单{
身高：100%；
溢出：隐藏；
位置：绝对位置；
右：0；
排名：0；
底部：0；
宽度：0；
z指数：15；
盒影：3px0 15px 0#131313；
}
.移动菜单.移动菜单内容{
宽度：60vw；
最小宽度：300px；
身高：100%；
位置：相对位置；
弯曲方向：立柱；
}
.移动菜单.移动菜单内容.移动搜索{
高度：150像素；
背景：#fff；
宽度：100%；
}
.移动菜单.移动菜单内容{
列表样式：无；
填充：0！重要；
}
.移动菜单.移动菜单内容.移动选项