实现了一个多级折叠菜单系统，使用纯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