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

Question

我创建了一个<ul>元素，而我想要做的是突出显示某个孩子的列表元素，直到整个过程。 但是，由于嵌套的子项，当我突出显示父项时，也会突出显示其所有子项（而我只想突出显示父项的文本）。

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

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

有什么建议么？ 谢谢。

Answer 1

编辑：

好的，在了解了您要解决的实际问题之后，我们做了一些工作，但是我得到了一个可行的解决方案。

工作演示

注意事项

1. <li>所有文本都必须放在某种容器中， <span>可以。 您有些跨度，有些则没有，所以我把它们全部跨度给您。

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

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

4.此时包含的d3代码已经过时了。 可以使用jQuery的7条提示行来完成。

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

Java脚本

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