下面我将详细讲解使用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代码进行实现。
该示例展示了如何将上述的代码扩展到多级菜单，并添加了更多的样式以实现更好的视觉效果。
本文链接：http://task.lmcjl.com/news/10314.html