javascript - 突出显示列表的 parent ，但不是所有 child

Question

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

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

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

有什么建议吗？谢谢。

Answer 1

编辑:

好吧，在了解您要解决的实际问题是什么之后，我花了一些功夫，但我得到了一个可行的解决方案。

Working DEMO

一些注意事项

1.您的所有文本都在 <li> 中需要在某种容器中，a <span>很好。你有一些在跨度中，有些没有，所以我把它们全部放在跨度中给你。

2.这不能用 background-color 来完成关于<li>或<ul>因为如果它有子项，它会跨越多行。您必须使用 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;
}