树状展开css

<ul class="tree">
  <li>
    <span class="tree-toggle">Node 1</span>
    <ul>
      <li>Node 1.1</li>
      <li>Node 1.2</li>
    </ul>
  </li>
  <li>
    <span class="tree-toggle">Node 2</span>
    <ul>
      <li>Node 2.1</li>
      <li>Node 2.2</li>
    </ul>
  </li>
</ul>

.tree {
  list-style: none;
  padding: 0;
}

.tree li {
  margin: 0;
  padding: 5px 0;
}

.tree-toggle {
  cursor: pointer;
}

.tree ul {
  display: none;
  list-style: none;
  padding-left: 20px;
}

.tree li.open > ul {
  display: block;
}

document.addEventListener('DOMContentLoaded', function() {
  const toggles = document.querySelectorAll('.tree-toggle');

  toggles.forEach(toggle => {
    toggle.addEventListener('click', function() {
      const li = this.parentElement;
      li.classList.toggle('open');
    });
  });
});