实现了一个多级折叠菜单系统，使用纯HTML、CSS和JavaScript（无任何框架）
一、二级菜单展开
1、实现效果
初始状态-展示全部一级菜单
选中共状态，一级标题选中共为蓝色背景色，二级标题选中共为蓝色文字，展开右侧图标为-,后缩状态右侧图标为+
2、实现
HTML结构
<ul class="menu"><li class="menu-item"><div class="menu-header"><a href="#" class="menu-link">一级标题</a><span class="toggle">+</span></div><ul class="submenu"><li><a href="#" class="submenu-link">子菜单项</a></li><!-- 更多子项... --></ul></li><!-- 更多一级菜单... -->
</ul>- 层级关系：
menu > menu-item > menu-header + submenu - 关键元素：
.menu-header- 可点击的菜单标题区域.toggle- 控制展开/折叠的"+"/-"按钮.submenu- 默认隐藏的子菜单容器
CSS样式
.menu-header {display: flex; /* Flex布局实现水平排列 */align-items: center; /* 垂直居中 */justify-content: space-between; /* 左右分散对齐 */background-color: #76787b; /* 灰色背景 */transition: background-color 0.3s ease; /* 悬停动画 */
}.submenu {display: none; /* 初始隐藏子菜单 */padding-left: 30px; /* 缩进效果 */background-color: #f1f1f1; /* 浅灰色背景 */
}.active .menu-header {background-color: #0096c7; /* 选中状态蓝色高亮 */
}- 布局特点：
- 使用Flexbox实现菜单标题和切换按钮的完美对齐
- 子菜单默认隐藏（
display: none） - 通过缩进(padding-left)实现层级视觉区分
JavaScript交互
function toggleSubmenu(item) {const submenu = item.querySelector('.submenu');const toggle = item.querySelector('.toggle');if (submenu.style.display === 'block') {// 折叠逻辑submenu.style.display = 'none';toggle.textContent = '+';} else {// 展开逻辑submenu.style.display = 'block';toggle.textContent = '-';}
}-
核心功能：
- 点击菜单头时切换子菜单显示状态
- 自动关闭其他菜单（保持单开模式）
- 视觉反馈：
- 切换"+"和"-"图标
- 添加
.active类改变背景色
关键实现技巧
- 纯CSS隐藏/显示：通过
display: none/block控制子菜单显隐 - 状态管理：用
.active类标记当前展开的菜单项 - 事件委托：直接给每个菜单头绑定点击事件（适合简单结构）
- 视觉层次：通过背景色和缩进区分不同级别菜单
实现代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Multi-Level Menu with Flexbox</title><style>/* styles.css */body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.menu-container {padding: 20px;}.menu {list-style-type: none;padding: 0;margin: 0;width:400px;}.menu-header {display: flex;/* 使用 Flexbox 布局 */align-items: center;/* 垂直居中对齐 */justify-content: space-between;/* 图标和文字之间的间距 */padding: 10px 20px;background-color: #76787b;color: white;cursor: pointer;transition: background-color 0.3s ease;border:1px solid #fff;}.menu-header:hover {background-color: #444;}.toggle {font-size: 20px;color: white;}.menu-link {color: white;text-decoration: none;flex-grow: 1;/* 让链接占据剩余空间 */}.submenu {list-style-type: none;padding-left: 30px;display: none;/* 初始状态下隐藏子菜单 */background-color: #f1f1f1;}.submenu-link {display: block;padding: 5px 0;colo
