突出显示列表的父母，但不是所有孩子

Question

我创建了一个<ul> 元素，我想做的是突出显示某个子元素的列表元素，并一直向上。但是，由于嵌套的子级，当我突出显示父级时，它的所有子级也会突出显示（而我只想突出显示父级的文本）。

https://jsfiddle.net/zcfvuh6h/3/

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

有什么建议吗？谢谢。

Answer 1

编辑：

好的，所以在了解您要解决的实际问题是什么之后，这需要一些工作，但我得到了一个可行的解决方案。

Working DEMO

注意事项

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

2。这不能用<li> 或<ul> 上的background-color 来完成，因为如果它有孩子，它会跨越多行。您必须使用css pseudo-element 才能获得所需的效果。

3。我发布的演示还根据您单击的元素动态设置元素和父级的背景。 您必须单击列表项才能显示背景颜色。

4。您包含的 d3 代码此时已全部过时。总共 7 行 jQuery 就可以完成。

5。享受吧！

HTML

...
  <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>
...

Javascript

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

CSS

.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;
}