javascript - 更改文本节点的样式但不更改子节点

Question

我正在尝试创建一个可折叠的层次结构。我在其中试图突出显示用户正在扩展的地方。我试图将 font-weight 属性设置为 BOLD 以突出显示。但这也是所有 child 的亮点。

<ul>
    <li id="A">A
         <ul>
            <li id="A_1">1</li>
            <li id="A_2">2
                <ul>
                    <li id="A_2_2.1">2.1</li>
                    <li id="A_2_2.2">2.2</li>
                </ul>
            </li>
         </ul>
     </li>
  </ul>

我在这里尝试做的是如果用户选择 A>2>2.2 。我将突出显示 3 个 li 节点的文本节点。

$('li').on('click', function (event) {
     event.preventDefault();
     $('ul:first',event.target).toggle("slow");
     document.getElementById($(event.target).attr("id")).setAttribute("style","font-weight:bold");
     event.stopPropagation();
});

这里的问题是，当我运行上面的代码时，它会突出显示所有列表，而不仅仅是文本节点。

最终应该是这样的

**A**
  1
  **2**
    2.1
    **2.2**

Answer 1

子元素将默认为 font-weight: inherit。

如果您不希望它们从其父元素继承值，则必须显式地将值设置为其他值。

或者，将要设置样式的文本节点包裹在另一个元素(例如跨度)中，然后将其设为粗体。