html函数如何构建树形菜单结构 html函数嵌套列表的样式控制

<ul class="tree-menu">
  <li>
    <span>前端开发</span>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li>
        <span>JavaScript</span>
        <ul>
          <li><a href="#">ES6</a></li>
          <li><a href="#">DOM 操作</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">后端开发</a></li>
</ul>

.tree-menu {
  list-style: none;
  padding-left: 0;
}
.tree-menu li {
  margin: 5px 0;
}
.tree-menu ul {
  list-style: none;
  padding-left: 20px;
  margin-top: 5px;
}
.tree-menu span {
  font-weight: bold;
  cursor: pointer;
}
.tree-menu a {
  text-decoration: none;
  color: #333;
}
.tree-menu a:hover {
  text-decoration: underline;
}

document.querySelectorAll('.tree-menu > li span').forEach(function(item) {
  item.addEventListener('click', function(e) {
    const subMenu = this.nextElementSibling;
    if (subMenu && subMenu.tagName === 'UL') {
      subMenu.style.display = 
        subMenu.style.display === 'none' ? 'block' : 'none';
    }
    e.stopPropagation();
  });
});

span::before {
  content: '▶ ';
  font-size: 0.8em;
  margin-right: 6px;
  transition: transform 0.2s;
}
span.expanded::before {
  content: '▼ ';
}