Javascript 在动态嵌套列表中单击更改背景列表项

我在运行时动态数据库中绘制了嵌套列表，如下所示：

<div class="list"><ul>
<li>
    listA
    <ul>
        <li>Alist1</li>
        <li>Alist2</li>
        <li>Alist3</li>
    </ul>
</li>
<li>
    listB
    <ul>
        <li>BList1</li>
        <li>BList2</li>
        <li>BList3</li>
    </ul>
</li>

使用此样式：

li.selected {
background-color: aqua;}

我知道我应该使用直接后代操作符（>）来强制只更改父对象，但我的问题是列表是动态绘制的，我不能限制其级别和嵌套列表

---

是否总是强制只更改单击的项目？

1-当列表中有类

列表时，不能使用
列表
，而您需要使用点而不是
的类

2-您需要像
$（'.list>ul>li'）一样使用


$（文档）.ready（函数（）{
$（'ul>li'）。在（'click'，函数（e）{
e、 停止传播（）；
//$（'li>ul'）.hide（）；
$（this.find（'>ul'）.slideDown（）；
$（this）.parent（'ul'）.find（'li'）.removeClass（'selected'）；
$（this.addClass（'selected'）；
});
});
ul{
背景：#fff；
}
li>ul{
显示：无；
}
李先生当选{
背景：红色；
}



利斯塔

Alist1

第1-1页
第1-2页
第1-3页


Alist2
Alist3



列表B

闪电1
闪电2
闪电3



到目前为止您已经尝试了什么？？您想设置一个li的背景吗？第一个ul之后的第一个嵌套li？@KolaCaine我只想在单击时更改每个列表项的背景，但实际情况是，单击列表项样式中的所有嵌套列表都发生了更改，例如，将
类设置为活动的
类CSS，并在单击CSS时放置该类，然后在CSS上放置背景，或者如果您想要动态背景更改JS文件中的背景属性是否理解？这是相同的行为。。它会更改父项及其子项我只想更改单击的项，而不是它的子项。虽然我的问题是当它绘制动态时，我无法确定嵌套列表的数量。@Ahmedmad此代码不会更改子项。。请记住，默认情况下，all元素没有背景。。因此，虽然您没有为任何嵌套li设置背景，但它将显示与其嵌套li相同的背景parent@AhmedEmad我更新我的答案。。正如您在设置嵌套ul背景后看到的，直接li背景已更改感谢您的帮助，但它强制仅为父级着色。我想在单击时为任何列表项上色，并保持其他项目不上色，而不仅仅是parents@AhmedEmad没那么容易。。我相信还有另外一种简单的方法可以做到这一点，但我现在还没有想到。。因此，请查看更新的答案，我认为它与您要查找的内容很接近。。希望如此
li.selected {
background-color: aqua;}