树形菜单是一种用户界面元素，它以分层结构显示数据或选项。它通常用于网站、应用程序和桌面软件。本文将介绍如何使用HTML、CSS和JavaScript实现Web树形菜单。
HTML结构
树形菜单的HTML结构包括一个根元素（通常是或）和一个子元素（也是或）列表，其中嵌套了其他元素（如）。每个元素代表一个菜单项，可以包含文本、图标或其他元素。例如，以下代码创建一个带有两个菜单项的根菜单：
html
菜单项1
菜单项2
子菜单项1
子菜单项2
CSS样式
要为树形菜单设置样式，可以使用CSS。它可以控制菜单外观，如字体、颜色、填充和边距。例如，以下代码为菜单项添加蓝色背景和白色文本：
css
ul {
background-color: 0000FF;
color: FFFFFF;
}
JavaScript交互
为了使树形菜单可交互，可以使用JavaScript。它可以处理用户的单击事件、展开和折叠子菜单以及其他操作。例如，以下代码为菜单项添加单击事件侦听器，单击时展开或折叠其子菜单：
javascript
const menuItems = document.querySelectorAll('li');
menuItems.forEach(item => {
item.addEventListener('click', () => {
const subMenu = item.querySelector('ul');
subMenu.style.display = subMenu.style.display === 'none' ? 'block' : 'none';
});
});
通过使用HTML、CSS和JavaScript，您可以实现自定义的Web树形菜单，以满足您的特定需求。这种菜单可以有效地组织大量数据或选项，并增强用户的交互体验。
