前端：純HTML、CSS和JS菜單樣式

實現了一個多級折疊菜單系統，使用純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 = '-';}
}

??核心功能??：
1. ??點擊菜單頭??時切換子菜單顯示狀態
2. ??自動關閉其他菜單??（保持單開模式）
3. ??視覺反饋??：
  - 切換"+"和"-"圖標
  - 添加.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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/78626.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/78626.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/78626.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！