已应用 Javascript 样式，但 HTML 中未更改答案

【问题标题】：Javascript style applied but no changed in HTML已应用 Javascript 样式，但 HTML 中未更改
【发布时间】：2019-07-02 17:49:53
【问题描述】：

我有一个动态构建的 HTML 树，看起来像这样

<ul>
    <li class="parent">Node 1</li>
    <li>
        <ul>
            <li class="parent">Node 1.1</li>
            <li>
                <ul>
                    <li class="leaf">Node 1.1.1</li>
                    <li class="leaf">Node 1.1.2</li>
                    <li class="leaf">Node 1.1.3</li>
                </ul>
            </li>
            <li class="parent">Node 1.2</li>
            <li>
                <ul>
                    <li class="leaf">Node 1.2.1</li>
                    <li class="leaf">Node 1.2.2</li>
                    <li class="leaf">Node 1.2.3</li>
                </ul>
            </li>
        </ul>
    </li>
<li class="parent">Node 2</li>
...
</ul>

页面上的最终看起来像

Node 1
    Node 1.1
        Node 1.1.1
        Node 1.1.2
        Node 1.1.3
    Node 1.2
        Node 1.2.1
        Node 1.2.2
        Node 1.2.3
Node 2
    ...

构建树后，我调用$(.parent).next().toggle() 来隐藏除主根（节点 1、节点 2 等）以外的所有节点。然后，用户可以单击每个节点以打开下一个子节点，或单击过滤按钮以仅显示一个特定节点、其子节点及其直接父节点（在节点 1.1.2 上过滤意味着仅显示节点 1、节点 1.1 ，节点 1.1.2，然后是子节点）。

过滤本身有效，但现在我想打开所有父节点，直到过滤节点。为此，我有以下 javascript 代码；

let el = e.target.parentNode;
while (el.parentNode) {
    el = el.parentNode;
    el.style.display = 'block';
}

其中e 是点击事件。这段代码应该做的是遍历 DOM 找到被点击元素的父元素并将它们的display 样式属性设置为block，但这并没有发生。当我 console.log(el.style.display) 它说 block 时，所以应用了样式，它只是没有显示在 HTML 中。手动将li 的内联display: none 值更改为display: block 完全符合我的要求。

我也尝试使用el.setAttribute('style', 'display: block!important') 设置样式，但无济于事。我错过了什么？

let el = e.target.parentNode;
while (el.parentNode) {
  el = el.parentNode;
  el.style.display = 'block';
}

<ul>
  <li class="parent">Node 1</li>
  <li>
    <ul>
      <li class="parent">Node 1.1</li>
      <li>
        <ul>
          <li class="leaf">Node 1.1.1</li>
          <li class="leaf">Node 1.1.2</li>
          <li class="leaf">Node 1.1.3</li>
        </ul>
      </li>
      <li class="parent">Node 1.2</li>
      <li>
        <ul>
          <li class="leaf">Node 1.2.1</li>
          <li class="leaf">Node 1.2.2</li>
          <li class="leaf">Node 1.2.3</li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="parent">Node 2</li>
</ul>

【问题讨论】：

有没有可能用你所拥有的东西来做一个堆栈闪电战？
我看看我能做什么
@Crocsx 为什么不在这里使用 stacksn-p
当您将样式更改为阻止时，您希望看到哪些变化？
如果孩子们是真正的孩子而不是兄弟姐妹，那么树结构会更符合逻辑，也更容易处理。

标签： javascript html css

【解决方案1】：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
.HideX{
	display:none;
};
</style>
<body>
<ul>
    <li class="parent">Node 1
        <ul>
            <li class="parent">Node 1.1
                <ul>
                    <li class="leaf">Node 1.1.1</li>
                    <li class="leaf">Node 1.1.2</li>
                    <li class="leaf">Node 1.1.3</li>
                </ul>
            </li>
            <li class="parent">Node 1.2
                <ul>
                    <li class="leaf">Node 1.2.1</li>
                    <li class="leaf">Node 1.2.2</li>
                    <li class="leaf">Node 1.2.3</li>
                </ul>
            </li>
        </ul>
    </li>
	
</ul>
<script>
$(document).ready( function() {
	$("li").click(function(e) {
		if( $(this).find('>ul').hasClass('.HideX') ){ // if Hide
		// then Remove Hide State
			$(this).children('ul').removeClass('.HideX').children('li').slideUp();
			e.stopPropagation(); // this is to prevent other item toggle because this event
		}
		else{ // if Not Hide
		// then Add Hide State
			$(this).children('ul').addClass('.HideX').children('li').slideDown();
			e.stopPropagation(); // this is to prevent other item toggle because this event
		}
	});

});


</script>
</body>
</html>

这样的？

【讨论】：