javascript - 在嵌套列表中，单击时更改单个 元素的样式

Question

首先，为我的英语感到抱歉，并为我对问题的错误解释道歉(这是我在 stackoverflow 上的第一个问题)。我会尝试更好地解释这个问题:

我有动态生成的嵌套元素列表(做某事的步骤)(在 WordPress 帖子的可视化编辑器中)。我希望当我单击列表的任何元素(步骤)时，该元素会以背景突出显示。目标似乎并不太难，我认为这段代码应该可以工作:

$('li').click(function(){
   $(this).toggleClass('highlight'); //Alternate hihglight on click
   $('.highlight').not(this).removeClass('highlight'); //Remove any other highlight. 
});  

.highlight{background:#ddd;} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3
        <ol>
            <li>Element 3.1</li>
            <li>Element 3.2
                <ol>
                    <li>Element 3.2.1</li>
                    <li>Element 3.2.2</li>
                </ol>
            </li>
        </ol>
	</li>
    <li>Element 4
        <ol>
            <li>Element 4.1</li>
        </ol>
    </li>
    <li>Element 5</li>
</ol>

但是，当我单击父元素(例如元素 3)或子元素(例如元素 3.1 或元素 3.2.2)时，整个嵌套列表都会突出显示，而不仅仅是单击的元素。

感谢之前的所有回答(Pointy、Chris-Developer 和 Dave)，但他们并没有完全解决问题(您可以在代码片段中尝试)。

也许一个可能的解决方案是在加载文档时使用 JavaScript 在每个元素的文本周围添加一个“span”(记住列表是由可视化编辑器生成的)，然后是之前的 jQuery 代码(带有次要修改)可以工作。我会尝试。欢迎任何其他解决方案或建议。

Answer 1

我认为您可以通过两件简单的事情来解决问题:

1. 添加样式规则以强制为 <ol> 使用一致的纯色背景 block ；
2. 当您处理“点击”时，停止事件传播，以便父级 <li>也不回应。

第一个很简单:

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();
});