Javascript 突出显示列表的父项，但不是所有子项

我已经创建了一个

元素，我试图做的是突出显示某个子元素的列表元素。但是，由于嵌套的子对象，当我高亮显示父对象时，也会高亮显示其所有子对象（而我只想高亮显示父对象的文本）

在本例中，我应该突出显示节点Four12、Four1和Four

有什么建议吗？谢谢。

编辑： 好的，在理解了你试图解决的实际问题之后，这需要一些工作，但我得到了一个有效的解决方案

需要注意的几件事

一,。

中的所有文本都需要放在某种容器中，

就可以了。你有一些在跨度中，有些没有，所以我为你把它们都放在跨度中

二,。使用

或
上的
背景色
无法完成此操作，因为如果它有子项，则会跨越多行。为了得到想要的效果，你必须使用一种新的方法

三,。我发布的演示还动态地设置元素的背景以及基于您单击的元素的父元素必须单击列表项才能显示背景颜色。

四,。你的d3代码，你包括在这一点上都是过时的。它可以用7行jQuery完成

五,。享受吧

HTML
CSS
编辑：
好的，在理解了你试图解决的实际问题之后，这需要一些工作，但我得到了一个有效的解决方案


需要注意的几件事

一,。
中的所有文本都需要放在某种容器中，
就可以了。你有一些在跨度中，有些没有，所以我为你把它们都放在跨度中

二,。使用
或
上的
背景色
无法完成此操作，因为如果它有子项，则会跨越多行。为了得到想要的效果，你必须使用一种新的方法

三,。我发布的演示还动态地设置元素的背景以及基于您单击的元素的父元素必须单击列表项才能显示背景颜色。

四,。你的d3代码，你包括在这一点上都是过时的。它可以用7行jQuery完成

五,。享受吧

HTML
CSS
那么你尝试过的代码在哪里呢？你有没有让你困扰的代码可以发布，或者提供一个到现场演示的链接，比如JSFIDLE。我非常接近。再给我几分钟，我会有一个解决方案you@user2007716我的解决方案已经更新，并且按照您的要求工作。那么您尝试过的代码在哪里？您是否有困扰您的代码，可以发布，或者提供到实时演示（如JSFIDLE）的链接。我非常接近。再给我几分钟，我会有一个解决方案you@user2007716我的解决方案已更新&按照您的要求工作JSFiddle不适合我。我试过IE11、FF 44和Chrome 50，但根本看不到青色背景。@altocumulus您需要单击
。它不像OP的原始示例那样是硬编码的。它会根据你点击的元素动态设置背景-我会把这些信息添加到我的帖子中哦，这太棒了！非常感谢，非常感谢@user2007716如果您使用的是解决问题的解决方案，请记住将答案标记为已接受答案。这有助于未来用户快速确定可行的解决方案，以便他们也能解决问题。JSFIDLE不适合我。我试过IE11、FF 44和Chrome 50，但根本看不到青色背景。@altocumulus您需要单击
。它不像OP的原始示例那样是硬编码的。它会根据你点击的元素动态设置背景-我会把这些信息添加到我的帖子中哦，这太棒了！非常感谢，非常感谢@user2007716如果您使用的是解决问题的解决方案，请记住将答案标记为已接受答案。这有助于未来用户快速确定可行的解决方案，以便他们也能解决问题
...
  <li id="i6"><span class="listItem">Four</span>
    <ul>
      <li id="i7" class="listItem"><span class="listItem">Four1</span>
          <ul>
            <li id="i71" class="listItem"><span class="listItem">Four11</span>
               <ul>
                  <li id="i4111" class="listItem"><span class="listItem">Four111</span></li>
                  <li id="i4112" class="listItem"><span class="listItem">Four112</span></li>
               </ul>
              </li>        
            <li id="i12" class="listItem"><span class="listItem">Four12</span></li>
          </ul>
      <li class="listItem"><span class="listItem">Five</span></li>
    </ul>
  </li>
...

$(function () {
  $(".listItem:not(li)").on("click", function () {
    var parentListItem = $(this).parent();
    $("#menu1 .highlight").removeClass("highlight");
    parentListItem.addClass("highlight").parents("li").addClass("highlight");
  });
});

.highlight {
  position: relative;
}
.highlight > * {
  position: relative;
  z-index: 100;
}
.highlight::before {
  content: ' ';
  background-color: cyan;
  width: 100%;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}