用Javascript写一个树形菜单

以下是一个简单的树形菜单的JavaScript代码示例：

<!-- 在html中定义一个ul元素作为菜单容器 -->
<ul id="menu">
  <li>
    <span>菜单1</span>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
  <li>
    <span>菜单2</span>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
    </ul>
  </li>
</ul>

<script>
  // 获取菜单容器元素
  var menu = document.getElementById("menu");

  // 为所有的菜单项添加点击事件监听器
  var menuItems = menu.querySelectorAll("li > span");
  for (var i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener("click", function() {
      // 切换菜单项的展开状态
      this.parentElement.classList.toggle("active");
    });
  }
</script>

<style>
  /* 定义菜单项的样式 */
  #menu li {
    list-style: none;
  }
  /* 定义展开状态下的菜单项样式 */
  #menu li.active > ul {
    display: block;
  }
  /* 隐藏所有子菜单 */
  #menu ul {
    display: none;
  }
</style>

上述代码中，我们首先在HTML中定义了一个ul元素作为菜单容器，然后使用JavaScript获取该元素，并为所有菜单项添加了点击事件监听器。当用户点击菜单项时，我们通过切换菜单项的父元素（li元素）的active类来改变菜单项的展开状态。我们还使用CSS定义了菜单项和展开状态下的菜单项的样式。