编辑：

Question

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

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

在这个例子中，我应该突出显示节点Four12，Four1和Four。

有什么建议吗？谢谢。

Answer 1

编辑：

好的，所以在了解了您要解决的实际问题之后，需要做一些工作，但我找到了一个有效的解决方案。

Working DEMO

需要注意的一些事项

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

2。 background-color或<li>上的<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>
...

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

Answer 2

只需使用CSS预先明确地设置元素的背景颜色。这样，它不是从父母那里继承的。

示例：

ul { background-color: gray; }

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

2 个答案:

编辑：

HTML

的Javascript

CSS