用JS做的简单的可折叠的两级树形菜单

下面我将详细讲解使用JS实现一个简单的可折叠两级树形菜单的攻略。

准备工作

首先，我们需要准备一些基本的html和css代码，用于渲染出菜单的样式和结构。下面是一个简单的示例结构：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单2</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li><a href="#">菜单3</a>
      <ul>
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
        <li><a href="#">子菜单3</a></li>
        <li><a href="#">子菜单4</a></li>
      </ul>
    </li>
  </ul>
</div>

接下来，我们需要为菜单的展开和折叠添加样式。下面是一个简单的样式示例：

.menu li ul {
  display: none;
}
.menu li.open ul {
  display: block;
}

上述样式中，我们使用了CSS选择器来隐藏所有的子菜单，同时为展开状态的菜单添加了.open类，用于显示对应的子菜单。

实现折叠展开功能

接下来，我们需要使用JS来实现菜单的折叠和展开功能。我们可以通过给菜单添加点击事件来实现这个功能。下面是一个简单的示例：

var menuItems = document.querySelectorAll(".menu > ul > li");
menuItems.forEach(function(menuItem) {
  menuItem.addEventListener("click", function() {
    this.classList.toggle("open");
  });
});

上述代码中，我们首先使用document.querySelectorAll方法来获取所有一级菜单。然后，我们对每个菜单项都添加了一个click事件监听器，在点击菜单项时切换.open类，实现菜单的折叠和展开。

绑定事件监听器

最后一步，我们需要确保菜单项的子菜单也能够折叠和展开。为此，我们需要在子菜单实际展开时，添加事件监听器。下面是一个示例代码：

var subMenuItems = document.querySelectorAll(".menu > ul > li > ul > li");
subMenuItems.forEach(function(subMenuItem) {
  subMenuItem.addEventListener("click", function(event) {
    event.stopPropagation();
  });
});

上述代码中，我们首先使用document.querySelectorAll方法来获取所有二级菜单项。然后，我们对每个子菜单项都添加了一个click事件监听器，通过event.stopPropagation()方法来阻止点击事件冒泡，确保子菜单项的点击行为不会触发父级菜单的折叠或展开行为。

示例说明

• 示例一：折叠展开菜单

上述示例中，展示了一个标准的两级菜单，使用了上述的HTML、CSS和JS代码进行实现。

• 示例二：多级折叠菜单

该示例展示了如何将上述的代码扩展到多级菜单，并添加了更多的样式以实现更好的视觉效果。