js树状菜单制作

<ul id="myMenu">
  <li>菜单1
    <ul>
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li>菜单2</li>
  <li>菜单3
    <ul>
      <li>子菜单4</li>
      <li>子菜单5</li>
    </ul>
  </li>
</ul>

#myMenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
#myMenu li {
  cursor: pointer;
}
#myMenu ul {
  margin-left: 20px;
  display: none;
}
#myMenu li:before {
  content: "+ ";
}
#myMenu li.open:before {
  content: "- ";
}

var menuItems = document.querySelectorAll("#myMenu li");
for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener("click", function() {
    var subMenu = this.querySelector("ul");
    if (subMenu) {
      if (subMenu.style.display === "block") {
        subMenu.style.display = "none";
        this.classList.remove("open");
      } else {
        subMenu.style.display = "block";
        this.classList.add("open");
      }
    }
  });
}