js树状菜单制作

以下是一个简单的基于JS的树状菜单制作方法：

HTML结构

首先，在HTML中创建一个带有ul和li标记的基本树形结构。

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

CSS样式

添加CSS样式以控制树形菜单的外观和布局。

#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: "- ";
}

JS代码

使用JavaScript创建一个事件侦听器，以便用户单击菜单项时显示或隐藏其子菜单。

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");
      }
    }
  });
}

这段代码为树形菜单的每个li元素添加了一个单击事件监听器。当用户单击它时，它会查找它的子菜单并将其显示或隐藏。它还为菜单项添加了一个“open”类，以便我们可以使用CSS样式控制其外观。

现在，我们已经创建了一个简单的可展开/折叠的树形菜单！