Question

我有一个动态构建的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>

Answer 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>

像这样吗？

应用了Javascript样式，但未更改HTML

1 个答案: