使用html + js實現下拉菜單demo，因為copy的網站菜單功能失效，就需要自己寫一個邏輯，點擊其他區域折疊菜單，可以參考：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折疊菜單 Demo</title><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}body {display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 100vh;background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);padding: 20px;}.container {width: 100%;max-width: 800px;text-align: center;}h1 {color: #2c3e50;margin-bottom: 30px;font-size: 2.5rem;text-shadow: 1px 1px 2px rgba(0,0,0,0.1);}.menu-container {background: white;border-radius: 10px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);overflow: hidden;margin-bottom: 30px;}.menu-item {border-bottom: 1px solid #eee;}.menu-item:last-child {border-bottom: none;}.menu-header {padding: 18px 20px;background: #3498db;color: white;cursor: pointer;display: flex;justify-content: space-between;align-items: center;transition: background 0.3s ease;}.menu-header:hover {background: #2980b9;}.menu-header.active {background: #2980b9;}.menu-content {padding: 0;background: #f8f9fa;max-height: 0;overflow: hidden;transition: max-height 0.4s ease, padding 0.4s ease;}.menu-content.active {max-height: 300px;padding: 20px;}.menu-content p {color: #555;line-height: 1.6;text-align: left;}.arrow {transition: transform 0.3s ease;}.arrow.active {transform: rotate(180deg);}.instructions {background: white;padding: 20px;border-radius: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);margin-top: 20px;}.instructions h2 {color: #2c3e50;margin-bottom: 15px;}.instructions p {color: #555;line-height: 1.6;margin-bottom: 10px;}.highlight {background: #ffeaa7;padding: 2px 5px;border-radius: 3px;font-weight: 500;}</style>
</head>
<body><div class="container"><h1>折疊菜單 Demo</h1><div class="menu-container"><div class="menu-item"><div class="menu-header"><span>前端技術</span><span class="arrow">▼</span></div><div class="menu-content"><p>HTML、CSS 和 JavaScript 是現代前端開發的三大核心技術。HTML提供頁面結構，CSS負責樣式表現，JavaScript實現交互功能。近年來，前端框架如React、Vue和Angular極大地提高了開發效率。</p></div></div><div class="menu-item"><div class="menu-header"><span>后端開發</span><span class="arrow">▼</span></div><div class="menu-content"><p>后端開發主要涉及服務器、應用程序和數據庫的交互。常見的后端語言包括Java、Python、PHP、Ruby和Node.js。后端開發需要關注數據存儲、API設計、安全性和性能優化等方面。</p></div></div><div class="menu-item"><div class="menu-header"><span>移動開發</span><span class="arrow">▼</span></div><div class="menu-content"><p>移動應用開發主要有原生開發（iOS和Android）和跨平臺開發（React Native、Flutter等）兩種方式。移動開發需要特別考慮不同設備的屏幕尺寸、性能限制和用戶體驗。</p></div></div></div><div class="instructions"><h2>使用說明</h2><p>1. 點擊<span class="highlight">菜單標題</span>可以展開或折疊內容</p><p>2. 點擊<span class="highlight">頁面其他區域</span>可以折疊所有已展開的菜單</p><p>3. 菜單展開時會有平滑的動畫效果</p></div></div><script>document.addEventListener('DOMContentLoaded', function() {const menuHeaders = document.querySelectorAll('.menu-header');const menuContents = document.querySelectorAll('.menu-content');const arrows = document.querySelectorAll('.arrow');// 點擊菜單標題的處理函數function toggleMenu(index) {// 切換當前菜單的激活狀態const isActive = menuContents[index].classList.contains('active');// 關閉所有菜單menuContents.forEach(content => content.classList.remove('active'));menuHeaders.forEach(header => header.classList.remove('active'));arrows.forEach(arrow => arrow.classList.remove('active'));// 如果當前菜單原本不是激活狀態，則激活它if (!isActive) {menuContents[index].classList.add('active');menuHeaders[index].classList.add('active');arrows[index].classList.add('active');}}// 為每個菜單標題添加點擊事件menuHeaders.forEach((header, index) => {header.addEventListener('click', function(e) {e.stopPropagation(); // 阻止事件冒泡toggleMenu(index);});});// 點擊頁面其他區域時關閉所有菜單document.addEventListener('click', function() {menuContents.forEach(content => content.classList.remove('active'));menuHeaders.forEach(header => header.classList.remove('active'));arrows.forEach(arrow => arrow.classList.remove('active'));});// 阻止菜單內容區域的點擊事件冒泡menuContents.forEach(content => {content.addEventListener('click', function(e) {e.stopPropagation();});});});</script>
</body>
</html>
![[HFCTF2020]EasyLogin](http://pic.xiahunao.cn/[HFCTF2020]EasyLogin)
