javascript - 更改textnode的样式，但不更改子节点的样式

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

<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节点的textnode。

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

这里的问题是当我在上面的代码上运行时，它突出显示了所有列表，而不仅仅是textnode。

最终应该看起来像

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

最佳答案

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

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

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