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

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