Javascript element.style.display='；无'；不起作用

我有以下动态构建的树结构

<ul>
    <li class="parent" data-mapping-id="1">Node 1 <span>(filter on node 1)</span>
        <ul>
            <li class="parent" data-mapping-id="2">Node 1.1 <span>(filter on node 1.1</span>
                <ul>
                    <li class="parent" data-mapping-id="3">Node 1.1.1 <span>(filter on node 1.1.1</span>
                        <ul>
                            <li class="leaf">Node 1.1.1.1</li>
                            <li class="leaf">Node 1.1.1.2</li>
                        </ul>
                    </li>
                    <li class="parent" data-mapping-id="4">Node 1.1.2 <span>(filter on node 1.1.2</span>
                        <ul>
                            <li class="leaf">Node 1.1.2.1</li>
                            <li class="leaf">Node 1.1.2.2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="parent" data-mapping-id="5">Node 1.2 <span>(filter on node 1.2</span>
                <ul>
                    <li class="parent" data-mapping-id="6">Node 1.2.1 <span>(filter on node 1.2.1</span>
                        <ul>
                            <li class="leaf">Node 1.2.1.1</li>
                            <li class="leaf">Node 1.2.1.2</li>
                        </ul>
                    </li>
                    <li class="parent" data-mapping-id="7">Node 1.2.2 <span>(filter on node 1.2.2</span>
                        <ul>
                            <li class="leaf">Node 1.2.2.1</li>
                            <li class="leaf">Node 1.2.2.2</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="parent" data-mapping-id="8">Node 1.3 <span>(filter on node 1.3</span>
                <ul>
                    <li class="parent" data-mapping-id="9">Node 1.3.1 <span>(filter on node 1.3.1</span>
                        <ul>
                            <li class="leaf">Node 1.3.1.1</li>
                            <li class="leaf">Node 1.3.1.2</li>
                        </ul>
                    </li>
                    <li class="parent" data-mapping-id="10">Node 1.3.2 <span>(filter on node 1.3.2</span>
                        <ul>
                            <li class="leaf">Node 1.3.2.1</li>
                            <li class="leaf">Node 1.3.2.2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="parent" data-mapping-id="11">Node 2 <span>(filter on node 2)</span>
        <ul>
            <li class="parent" data-mapping-id="12">Node 2.1 <span>(filter on node 2.1</span>
                <ul>
                    <li class="parent" data-mapping-id="13">Node 2.1.1 <span>(filter on node 2.1.1</span>
                        <ul>
                            <li class="leaf">Node 2.1.1.1</li>
                            <li class="leaf">Node 2.1.1.2</li>
                        </ul>
                    </li>
                    <li class="parent" data-mapping-id="14">Node 2.1.2 <span>(filter on node 2.1.2</span>
                        <ul>
                            <li class="leaf">Node 2.1.2.1</li>
                            <li class="leaf">Node 2.1.2.2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

默认情况下，只有根父节点可见（节点1、节点2等），但可以通过单击打开/关闭它们。也可以单击“过滤器打开…”

span

s。例如，当用户单击“节点1.1.1上的过滤器”时，生成的HTML结构应该如下所示

Node 1
    Node 1.1
        Node 1.1.1
            Node 1.1.1.1
            Node 1.1.1.2

换句话说，应该显示单击元素的所有直接父元素以及直接子元素。如果单击节点1.1，它应该如下所示

Node 1
    Node 1.1
        Node 1.1.1
        Node 1.1.2

我用一个非常难看的jquery函数实现了这一点

static hideChildren(element)
{
    // Gets the data-mapping-id from the clicked LI parent
    const id = element.getAttribute('data-mapping-id');
    // Uses that ID to get a jquery object
    element = $(`[data-mapping-id=${id}]`);
    // Ignore the direct children, but instead find all LI elements
    // belonging to the grandchildren of the clicked element
    element.children().children().find('li').toggle();
}

不过，我们希望转移到100%的香草Javascript，因为这是这个类中最后一个使用jquery的函数，所以我也想将其转换为香草Javascript。我尝试了以下功能

static hideChildren(element)
{
    // Get the direct children of clicked element
    const children = [...element.children];
    children.forEach((child) => {
        // Ignore the SPAN tag
        if (child.tagName === 'UL') {
            // Get the grandchildren of clicked element
            const grandChildren = [...child.children];
            grandChildren.forEach((grandChild) => {
                // For each grandchild, find all child LI tags
                const lis = [...grandChild.querySelectorAll('li')];
                lis.forEach((li) => {
                    // For each found LI, set the 'display' value to 'none'
                    li.style.display = "none";
                });
            });
        }
    });
}

然而，实际上什么也没有发生。当我

console.log（li.style.display）

时，我确实得到了

none

，但是

li

s仍然显示

我做了一个快速的测试，奇怪的是，它完全符合我的要求，但在我的实际问题中却不起作用

---

如果香草Javascript方法不起作用，我也很乐意接受一个更好的jquery替代方案。

为什么你不能使用它？我尝试过它，和其他软件包一起使用，但我无法让它们与Webpack Encore一起使用。为什么你不能使用？我尝试过它，和其他软件包一起使用，但我无法让它们与Webpack Encore一起使用。

static hideChildren(element)
{
    // Get the direct children of clicked element
    const children = [...element.children];
    children.forEach((child) => {
        // Ignore the SPAN tag
        if (child.tagName === 'UL') {
            // Get the grandchildren of clicked element
            const grandChildren = [...child.children];
            grandChildren.forEach((grandChild) => {
                // For each grandchild, find all child LI tags
                const lis = [...grandChild.querySelectorAll('li')];
                lis.forEach((li) => {
                    // For each found LI, set the 'display' value to 'none'
                    li.style.display = "none";
                });
            });
        }
    });
}