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

我认为您可以做两个简单的事情来解决问题：

添加样式规则，以强制<ol>块具有一致的纯色背景；
处理“点击”时，请停止事件传播，以使 parent <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();
});

Answer 2

看起来问题仅在单击子级时发生。当您单击是li的子代的li时，由于一个li在另一个li内，因此单击类型“同时发生在两个节点上”。要阻止点击传播到父级，请使用stopImmediatePropogation（）：

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

Answer 3

您可以使用CSS通过向每个标记添加id =“”来更改此标记，例如HTML：

li#parent:active {
  background: #111;
}

<ol>
   <li id="parent">Element 1</li>
   <li>Element 2</li>
   <li>Element 3</li>
      <ol>
         <li id="parent">Element 3.1</li>
         <li>Elenent 3.2</li>
            <ol>
               <li id="parent">Element 3.2.1</li>
               <li>Element 3.2.2</li>
            </ol>
         </li>
      </ol>
   </li>
</ol>

您想要做的事情无需使用JavaScript就可以实现。

希望这会有所帮助！

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

3 个答案: