Javascript 在嵌套列表中，更改单个列表的样式<；李>；元素时单击它

首先，为我的英语道歉，并为我对问题的错误解释道歉（这是我关于stackoverflow的第一个问题）。我将尝试更好地解释这个问题：

我有动态生成的嵌套元素列表（在WordPress文章的可视化编辑器中）。我希望当我单击列表中的任何元素（步骤）时，该元素会以背景突出显示。目标似乎并不太难，我认为这段代码应该可以实现：

$（'li'）。单击（函数（）{
$（this）.toggleClass（'highlight'）；//单击可替换hihglight
$（'.highlight'）。不是（这个）。removeClass（'highlight'）；//删除任何其他突出显示。
});  
。突出显示{背景：#ddd；}

要素1
要素2
要素3
要素3.1
要素3.2
要素3.2.1
要素3.2.2


要素4
要素4.1

要素5
我认为有两件简单的事情可以解决这个问题：

添加样式规则以强制
块具有一致的实心背景
处理“单击”时，停止事件传播，以便父级
也不会响应
第一个很简单：

ol { background-color: white; }

第二点也是：

$('li').click(function(e){
     $(this).toggleClass('my_li_background'); //Alternate background on click
     $('.my_li_background').not(this).removeClass('my_li_background'); //Remove other active backgrounds (optional)
     e.stopPropagation();
});

问题似乎只有在单击子项时才会发生。当您单击属于某个li的子级的li时，由于一个li位于另一个li的内部，因此单击排序“同时发生”（首先是子级，然后是父级）。要阻止单击传播到父级，请使用StopImmediateProposition（）：

您可以使用CSS对每个标记添加一个id=“”，例如HTML：


li#父级：活动{
背景：#111；
}

元素1
要素2
要素3
要素3.1
要素3.2
要素3.2.1
要素3.2.2


为
ol
添加规则：
ol{background color:white；}
（或您想要的任何颜色）的可能副本
$('li').click(function(e){
  e.stopImmediatePropagation()
  $(this).toggleClass('my_li_background'); //Alternate background on click
  $('.my_li_background').not(this).removeClass('my_li_background'); //Remove other active backgrounds (optional)
});